+ {children}
+
+)
+
+const Header = ({
+ children,
+ className,
+ ...props
+}: HTMLAttributes
+ {children}
+
+)
+
+CUICard.Header = Header
+
+const Body = ({
+ children,
+ className,
+ ...props
+}: HTMLAttributes
+ {children}
+
+)
+CUICard.Body = Body
+
+const Footer = ({
+ children,
+ className,
+ ...props
+}: HTMLAttributes
+ {children}
+
+)
+CUICard.Footer = Footer
+
+export default CUICard
\ No newline at end of file
diff --git a/src/components/CUICard/index.tsx b/src/components/CUICard/index.tsx
new file mode 100644
index 00000000000..7ec31939b49
--- /dev/null
+++ b/src/components/CUICard/index.tsx
@@ -0,0 +1 @@
+export { default } from './CUICard';
\ No newline at end of file
diff --git a/src/components/CUICard/styles.module.scss b/src/components/CUICard/styles.module.scss
new file mode 100644
index 00000000000..c840664129e
--- /dev/null
+++ b/src/components/CUICard/styles.module.scss
@@ -0,0 +1,60 @@
+// CUICard styles - to be added
+
+.cuiCard {
+ border-radius: .5rem;
+ background: #323230;
+ display: flex;
+ flex-direction: column;
+ aspect-ratio: 1;
+ width: 100%;
+ border: 1px solid rgba(65, 65, 65, .8);
+ padding: 1rem;
+ box-sizing: border-box;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+}
+
+[data-theme='light'] .cuiCard {
+ background: #F6F7FA;
+ border-color: var(--ifm-color-emphasis-300);
+}
+
+.cardBody {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ height: 100%;
+ box-sizing: border-box;
+ position: relative;
+ justify-content: center;
+ align-items: center;
+ gap: 0.75rem;
+}
+
+.cardHeader {
+ flex-shrink: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.cardHeader img {
+ width: 5rem;
+ height: 5rem;
+ object-fit: contain;
+ max-width: 75%;
+ max-height: 75%;
+}
+
+.cardFooter {
+ line-height: 1.2;
+ font-size: clamp(0.65rem, 2vw, 0.85rem);
+ font-weight: 600;
+ text-align: center;
+ word-wrap: break-word;
+ overflow-wrap: break-word;
+ hyphens: auto;
+ flex-shrink: 1;
+ min-height: 0;
+}
\ No newline at end of file
diff --git a/src/components/IntegrationGrid/IntegrationGrid.tsx b/src/components/IntegrationGrid/IntegrationGrid.tsx
new file mode 100644
index 00000000000..227b07dbe15
--- /dev/null
+++ b/src/components/IntegrationGrid/IntegrationGrid.tsx
@@ -0,0 +1,632 @@
+import React, { useState, useMemo, useEffect } from 'react';
+import Link from '@docusaurus/Link';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import { useColorMode } from '@docusaurus/theme-common';
+import CUICard from '@site/src/components/CUICard';
+import styles from './styles.module.scss';
+
+type CMSIntegrationData = {
+ id: number;
+ attributes: {
+ name: string;
+ slug: string;
+ category: string;
+ supportLevel: string;
+ docsLink?: string;
+ logo?: {
+ data?: {
+ attributes: {
+ url: string;
+ };
+ };
+ };
+ logo_dark?: {
+ data?: {
+ attributes: {
+ url: string;
+ };
+ };
+ };
+ };
+};
+
+type IntegrationData = {
+ slug: string;
+ docsLink?: string;
+ integration_logo: string;
+ integration_logo_dark?: string;
+ integration_type: string[];
+ integration_title?: string;
+ integration_tier?: string;
+};
+
+function IntegrationCard({ integration }: { integration: IntegrationData }) {
+ const { colorMode } = useColorMode();
+
+ // Convert ClickHouse docs URLs to relative links
+ const getNavigationLink = (docsLink: string | undefined, slug: string): string => {
+ if (!docsLink) {
+ return slug;
+ }
+
+ // Check if it's a ClickHouse docs URL
+ const clickhouseDocsMatch = docsLink.match(/https:\/\/clickhouse\.com\/docs\/(.+)/);
+ if (clickhouseDocsMatch) {
+ // Convert to relative link by removing the domain and keeping everything after /docs
+ return `/${clickhouseDocsMatch[1]}`;
+ }
+
+ // For external URLs, return as-is
+ return docsLink;
+ };
+
+ // Select appropriate logo based on theme and availability
+ const getLogoSrc = (): string => {
+ // If we're in dark mode and dark logo is available, use it
+ if (colorMode === 'dark' && integration.integration_logo_dark) {
+ return integration.integration_logo_dark;
+ }
+ // Otherwise, use the regular logo
+ return integration.integration_logo;
+ };
+
+ const linkTo = getNavigationLink(integration.docsLink, integration.slug);
+
+ return (
+
+
+ {getTierIcon(integration.integration_tier)}
+
+ )}
+
+ {integrations.map((integration, index) => (
+
+ );
+}
+
+// Helper function to transform CMS data to the expected format
+function transformCMSData(cmsData: CMSIntegrationData[]): IntegrationData[] {
+ // Mapping from CMS category to display-friendly integration type
+ const categoryMapping: { [key: string]: string } = {
+ 'AI_ML': 'AI/ML',
+ 'CLICKPIPES': 'ClickPipes',
+ 'DATA_INGESTION': 'Data ingestion',
+ 'DATA_INTEGRATION': 'Data integration',
+ 'DATA_MANAGEMENT': 'Data management',
+ 'DATA_VISUALIZATION': 'Data visualization',
+ 'LANGUAGE_CLIENT': 'Language client',
+ 'SECURITY_GOVERNANCE': 'Security governance',
+ 'SQL_CLIENT': 'SQL client'
+ };
+
+ return cmsData.map(item => {
+ // Map category to integration_type array
+ const integrationTypes = item.attributes.category ? [categoryMapping[item.attributes.category] || item.attributes.category] : [];
+
+ // Map supportLevel to integration_tier
+ const integrationTier = item.attributes.supportLevel?.toLowerCase() || '';
+
+ return {
+ slug: item.attributes.slug.startsWith('/') ? item.attributes.slug : `/${item.attributes.slug}`,
+ docsLink: item.attributes.docsLink,
+ integration_logo: item.attributes.logo?.data?.attributes.url ? `https://cms.clickhouse-dev.com:1337${item.attributes.logo.data.attributes.url}` : '',
+ integration_logo_dark: item.attributes.logo_dark?.data?.attributes.url ? `https://cms.clickhouse-dev.com:1337${item.attributes.logo_dark.data.attributes.url}` : undefined,
+ integration_type: integrationTypes,
+ integration_title: item.attributes.name,
+ integration_tier: integrationTier
+ };
+ });
+}
+
+// Custom hook for fetching CMS data
+function useCMSIntegrations() {
+ const [integrations, setIntegrations] = useState
+
+ );
+ }
+
+ // Handle error state
+ if (error) {
+ return (
+ Loading integrations...
+
+
+ );
+ }
+
+ // Handle empty state
+ if (integrations.length === 0) {
+ return (
+ Failed to load integrations: {error}
+Please try refreshing the page.
+
+
+ );
+ }
+
+ return (
+ No integrations found.
+
+ {/* Search Bar */}
+
+
+ ))
+ ) : (
+ // Show filtered results
+
+
+ )}
+
+ {filteredIntegrations.length === 0 && (
+
+ );
+}
+
+function getTierIcon(tier: string, withMargin = false): React.ReactNode {
+ const marginStyle = withMargin ? { marginRight: '6px' } : {};
+
+ switch (tier) {
+ case 'core':
+ return (
+
+ );
+ case 'partner':
+ return (
+
+ );
+ case 'community':
+ return (
+
+ );
+ default:
+ return null;
+ }
+}
+
+function getProperCapitalization(text: string): string {
+ // Handle special cases
+ const specialCases: { [key: string]: string } = {
+ 'ai/ml': 'AI/ML',
+ 'clickpipes': 'ClickPipes',
+ 'data ingestion': 'Data ingestion',
+ 'data integration': 'Data integration',
+ 'data management': 'Data management',
+ 'data visualization': 'Data visualization',
+ 'deployment method': 'Deployment method',
+ 'language client': 'Language client',
+ 'security governance': 'Security governance',
+ 'sql client': 'SQL client'
+ };
+
+ const lowerText = text.toLowerCase();
+ if (specialCases[lowerText]) {
+ return specialCases[lowerText];
+ }
+
+ // Default capitalization
+ return text.split(' ').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ');
+}
+
+function getSectionDescription(type: string): string {
+ const descriptions: { [key: string]: string } = {
+ 'ClickPipes': 'ClickPipes is an integration engine that makes ingesting massive volumes of data from a diverse set of sources as simple as clicking a few buttons.',
+ 'Data ingestion': 'Streamline your data pipelines with ClickHouse! Seamless integrations ensure efficient ingestion, optimizing real-time analytics.',
+ 'Data visualization': 'Illuminate your data stories! ClickHouse integrations enhance visualization, making insights more vivid & actionable.',
+ 'SQL client': 'Access and query ClickHouse databases using familiar SQL client tools and interfaces.',
+ 'Language client': 'Code in your comfort zone! ClickHouse\'s language client integrations make data access fluent across multiple programming languages.',
+ 'AI/ML': 'Leverage ClickHouse for machine learning and AI workloads with integrated ML tools and frameworks.',
+ 'Data management': 'Manage, monitor, and optimize your ClickHouse data with specialized management tools.',
+ 'Data integration': 'Integrate ClickHouse with your existing data infrastructure and workflows.',
+ 'Security governance': 'Implement security and governance frameworks for your ClickHouse environment.'
+ };
+ return descriptions[type] || 'Integrate ClickHouse with specialized tools and services.';
+}
\ No newline at end of file
diff --git a/src/components/IntegrationGrid/index.tsx b/src/components/IntegrationGrid/index.tsx
new file mode 100644
index 00000000000..26cf3326f97
--- /dev/null
+++ b/src/components/IntegrationGrid/index.tsx
@@ -0,0 +1 @@
+export { IntegrationGrid } from './IntegrationGrid';
\ No newline at end of file
diff --git a/src/components/IntegrationGrid/styles.module.scss b/src/components/IntegrationGrid/styles.module.scss
new file mode 100644
index 00000000000..c8dd02049ae
--- /dev/null
+++ b/src/components/IntegrationGrid/styles.module.scss
@@ -0,0 +1,181 @@
+@use '../../css/breakpoints.scss' as breakpoints;
+
+.integrationsContainer {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 0 1rem;
+}
+
+.searchContainer {
+ margin: 2rem 0 12px 0;
+ display: flex;
+ justify-content: flex-start;
+ position: relative;
+}
+
+.searchInput {
+ width: 100%;
+ max-width: 500px;
+ height: 38px;
+ padding: 0.5rem 0.75rem 0.5rem 2.5rem;
+ border-radius: 12px;
+ font-size: 0.875rem;
+ background: #F6F7FA;
+ color: var(--ifm-font-color-base);
+ border: 1px solid var(--ifm-color-emphasis-300);
+ line-height: 1.4;
+ box-sizing: border-box;
+
+ &:focus {
+ outline: none;
+ }
+
+ [data-theme='dark'] &:focus {
+ border-color: #FAFF69;
+ }
+
+ &::placeholder {
+ color: var(--ifm-color-emphasis-600);
+ font-weight: 400;
+ }
+
+ [data-theme='dark'] & {
+ --tw-bg-opacity: 1;
+ background: rgb(40 40 40 / var(--tw-bg-opacity));
+ border-color: var(--ifm-color-emphasis-300);
+ }
+}
+
+.searchIcon {
+ position: absolute;
+ left: 12px;
+ top: 50%;
+ transform: translateY(-50%);
+ width: 14px;
+ height: 14px;
+ color: var(--ifm-color-emphasis-600);
+ pointer-events: none;
+ z-index: 1;
+}
+
+.filterContainer {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8px;
+ justify-content: center;
+ margin: 2rem 0;
+
+ @media (max-width: breakpoints.$mobile-breakpoint) {
+ justify-content: flex-start;
+ overflow-x: auto;
+ padding-bottom: 4px;
+
+ &::-webkit-scrollbar {
+ height: 4px;
+ }
+
+ &::-webkit-scrollbar-track {
+ background: var(--ifm-color-emphasis-200);
+ border-radius: 2px;
+ }
+
+ &::-webkit-scrollbar-thumb {
+ background: var(--ifm-color-emphasis-400);
+ border-radius: 2px;
+ }
+ }
+}
+
+.filterButton {
+ padding: 8px 16px;
+ border: 1px solid var(--ifm-color-emphasis-300);
+ border-radius: 20px;
+ background: var(--ifm-background-color);
+ color: var(--ifm-font-color-base);
+ font-size: 0.875rem;
+ font-weight: 500;
+ cursor: pointer;
+ transition: all 0.2s ease;
+ white-space: nowrap;
+
+ &:hover {
+ border-color: var(--ifm-color-primary);
+ background: var(--ifm-color-primary-lightest);
+ }
+
+ [data-theme='dark'] &:hover {
+ background: #FAFF69;
+ border-color: #FAFF69;
+ color: #000;
+ }
+
+ &.active {
+ background: var(--ifm-color-primary);
+ border-color: var(--ifm-color-primary);
+ color: white;
+ }
+
+ [data-theme='dark'] &.active {
+ background: #FAFF69;
+ border-color: #FAFF69;
+ color: #000;
+ }
+}
+
+.integrationSection {
+ margin: 3rem 0;
+
+ &:first-child {
+ margin-top: 1rem;
+ }
+}
+
+.sectionTitle {
+ font-size: 1.5rem;
+ font-weight: 700;
+ margin-bottom: 0.5rem;
+ color: var(--ifm-font-color-base);
+}
+
+.sectionDescription {
+ font-size: 1rem;
+ color: var(--ifm-font-color-secondary);
+ margin-bottom: 2rem;
+ line-height: 1.6;
+}
+
+.integrationGrid {
+
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+
+ // Small desktop - 3 columns
+ @media (min-width: breakpoints.$tablet-breakpoint) {
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ }
+
+ // Medium desktop - 4 columns
+ @media (min-width: 1260px) {
+ grid-template-columns: repeat(4, minmax(0, 1fr));
+ }
+
+ // Large desktop - 5 columns
+ @media (min-width: breakpoints.$laptop-breakpoint) {
+ grid-template-columns: repeat(5, minmax(0, 1fr));
+ }
+
+ // Extra large screens - 6 columns
+ @media (min-width: 1600px) {
+ grid-template-columns: repeat(6, minmax(0, 1fr));
+ }
+}
+
+.noResults {
+ text-align: center;
+ padding: 3rem 1rem;
+ color: var(--ifm-font-color-secondary);
+
+ p {
+ font-size: 1.1rem;
+ margin: 0;
+ }
+}
\ No newline at end of file
diff --git a/src/theme/Footer/Layout/styles.module.scss b/src/theme/Footer/Layout/styles.module.scss
index c27483959f7..f64636d7211 100644
--- a/src/theme/Footer/Layout/styles.module.scss
+++ b/src/theme/Footer/Layout/styles.module.scss
@@ -11,6 +11,7 @@
width: 100%;
background-color: white;
height: 3.5rem;
+ z-index: 100;
}
.container {
diff --git a/static/images/integrations/logos/amazon_kinesis_logo.svg b/static/images/integrations/logos/amazon_kinesis_logo.svg
index c848407b742..b4d0a6dd2d5 100644
--- a/static/images/integrations/logos/amazon_kinesis_logo.svg
+++ b/static/images/integrations/logos/amazon_kinesis_logo.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/static/images/integrations/logos/amazon_msk.svg b/static/images/integrations/logos/amazon_msk.svg
index c4ba73a0e63..e894c0bfb0f 100644
--- a/static/images/integrations/logos/amazon_msk.svg
+++ b/static/images/integrations/logos/amazon_msk.svg
@@ -1 +1,15 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/static/images/integrations/logos/azure_event_hubs.svg b/static/images/integrations/logos/azure_event_hubs.svg
index 540f89c6b43..098cb5e1024 100644
--- a/static/images/integrations/logos/azure_event_hubs.svg
+++ b/static/images/integrations/logos/azure_event_hubs.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/static/images/integrations/logos/chproxy.svg b/static/images/integrations/logos/chproxy.svg
new file mode 100644
index 00000000000..fb558caa8ca
--- /dev/null
+++ b/static/images/integrations/logos/chproxy.svg
@@ -0,0 +1,10 @@
+
\ No newline at end of file
diff --git a/static/images/integrations/logos/clickpipes_for_amazon_s3.svg b/static/images/integrations/logos/clickpipes_for_amazon_s3.svg
new file mode 100644
index 00000000000..cd78a6f4efc
--- /dev/null
+++ b/static/images/integrations/logos/clickpipes_for_amazon_s3.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/static/images/integrations/logos/dbeaver_logo.svg b/static/images/integrations/logos/dbeaver_logo.svg
index f55e363df7a..dd8ca06cef0 100644
--- a/static/images/integrations/logos/dbeaver_logo.svg
+++ b/static/images/integrations/logos/dbeaver_logo.svg
@@ -1,7 +1,9 @@
-
+
\ No newline at end of file
diff --git a/static/images/integrations/logos/deltalake.png b/static/images/integrations/logos/deltalake.png
deleted file mode 100644
index 50287219024..00000000000
Binary files a/static/images/integrations/logos/deltalake.png and /dev/null differ
diff --git a/static/images/integrations/logos/deltalake.svg b/static/images/integrations/logos/deltalake.svg
new file mode 100644
index 00000000000..814654b6e09
--- /dev/null
+++ b/static/images/integrations/logos/deltalake.svg
@@ -0,0 +1,3 @@
+
\ No newline at end of file
diff --git a/static/images/integrations/logos/lakekeeper.svg b/static/images/integrations/logos/lakekeeper.svg
new file mode 100644
index 00000000000..ae099d55e59
--- /dev/null
+++ b/static/images/integrations/logos/lakekeeper.svg
@@ -0,0 +1,174 @@
+
+
+
+
diff --git a/static/images/integrations/logos/langchain.svg b/static/images/integrations/logos/langchain.svg
new file mode 100644
index 00000000000..06d5f5eb3ca
--- /dev/null
+++ b/static/images/integrations/logos/langchain.svg
@@ -0,0 +1,3 @@
+
\ No newline at end of file
diff --git a/static/images/integrations/logos/logo_cpp.png b/static/images/integrations/logos/logo_cpp.png
deleted file mode 100644
index 38d99684e06..00000000000
Binary files a/static/images/integrations/logos/logo_cpp.png and /dev/null differ
diff --git a/static/images/integrations/logos/logo_cpp.svg b/static/images/integrations/logos/logo_cpp.svg
new file mode 100644
index 00000000000..4b27aa39373
--- /dev/null
+++ b/static/images/integrations/logos/logo_cpp.svg
@@ -0,0 +1,21 @@
+
\ No newline at end of file
diff --git a/static/images/integrations/logos/nessie.png b/static/images/integrations/logos/nessie.png
new file mode 100644
index 00000000000..0e0257aadbf
Binary files /dev/null and b/static/images/integrations/logos/nessie.png differ
+
+ setSearchTerm(e.target.value)}
+ className={styles.searchInput}
+ />
+
+
+ {/* Filter Buttons */}
+
+ {/* Integration Type Filters - First Row */}
+
+
+ {/* Integration Sections */}
+ {selectedFilter === 'All' ? (
+ // Show sections grouped by type
+ Array.from(groupedIntegrations.entries())
+ .sort(([a], [b]) => {
+ // Use the same sort order as the filter buttons
+ const sortOrder = [
+ 'Language client',
+ 'ClickPipes',
+ 'Data ingestion',
+ 'Data visualization',
+ 'AI/ML',
+ 'Data integration',
+ 'Data management',
+ 'Security governance',
+ 'SQL client'
+ ];
+
+ const indexA = sortOrder.indexOf(a);
+ const indexB = sortOrder.indexOf(b);
+
+ // If both items are in the sort order, sort by their position
+ if (indexA !== -1 && indexB !== -1) {
+ return indexA - indexB;
+ }
+
+ // If only one item is in the sort order, prioritize it
+ if (indexA !== -1) return -1;
+ if (indexB !== -1) return 1;
+
+ // If neither item is in the sort order, fall back to alphabetical
+ return a.localeCompare(b);
+ })
+ .map(([type, typeIntegrations]) => (
+
+
+ {integrationTypes.map(type => (
+
+ ))}
+
+
+ {/* Integration Tier Filters - Second Row */}
+
+
+ {integrationTiers.map(tier => (
+
+ ))}
+
+ + {getProperCapitalization(type)} +
++ {getSectionDescription(type)} +
++ {getProperCapitalization(selectedFilter)} +
++ {getSectionDescription(selectedFilter)} +
+
+
+ )}
+ No integrations found matching your criteria.
+