{"$schema":"https://ui.shadcn.com/schema/registry-item.json","type":"registry:block","registryDependencies":["button","@efferd/full-width-divider"],"name":"integrations-3","description":"Split layout with text content and scattered grid-based integration logos.","categories":["integrations"],"files":[{"path":"registry/blocks/integrations/3/integrations.tsx","type":"registry:component","content":"import { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\nimport { FullWidthDivider } from \"@/components/full-width-divider\";\n\ntype LogoType = {\n\tsrc: string;\n\talt: string;\n};\n\ntype TileData = {\n\trow: number;\n\tcol: number;\n\tlogo?: LogoType;\n};\n\nexport function Integrations() {\n\treturn (\n\t\t<div className=\"relative mx-auto grid max-w-4xl grid-cols-1 gap-12 border-x md:grid-cols-2 md:items-center\">\n\t\t\t<FullWidthDivider className=\"-top-px\" />\n\n\t\t\t{/* Left Content */}\n\t\t\t<div className=\"p-4 md:p-6\">\n\t\t\t\t<div className=\"space-y-4\">\n\t\t\t\t\t<h2 className=\"font-medium text-3xl text-foreground tracking-tight sm:text-4xl\">\n\t\t\t\t\t\tConnect with your favorite tools\n\t\t\t\t\t</h2>\n\t\t\t\t\t<p className=\"text-muted-foreground text-sm md:text-base\">\n\t\t\t\t\t\tConnect your favorite tools with our growing library of\n\t\t\t\t\t\tintegrations.\n\t\t\t\t\t</p>\n\t\t\t\t\t<Button size=\"sm\">Explore integrations</Button>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t{/* Right Content - Visual */}\n\t\t\t<div className=\"place-items-end\">\n\t\t\t\t<div className=\"relative size-80\">\n\t\t\t\t\t{/* Grid Background */}\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\"absolute inset-0 size-full\",\n\t\t\t\t\t\t\t\"bg-[linear-gradient(to_right,theme(--color-border)_1px,transparent_1px),linear-gradient(to_bottom,theme(--color-border)_1px,transparent_1px)]\",\n\t\t\t\t\t\t\t\"bg-size-[64px_64px]\",\n\t\t\t\t\t\t\t\"mask-[radial-gradient(ellipse_at_center,black,black,transparent)]\"\n\t\t\t\t\t\t)}\n\t\t\t\t\t/>\n\n\t\t\t\t\t{tiles.map((tile) => (\n\t\t\t\t\t\t<IntegrationCard key={`${tile.row}_${tile.col}`} {...tile} />\n\t\t\t\t\t))}\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<FullWidthDivider className=\"-bottom-px\" />\n\t\t</div>\n\t);\n}\n\nfunction IntegrationCard({ row, col, logo }: TileData) {\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t\"absolute flex size-16 items-center justify-center\",\n\t\t\t\tlogo ? \"bg-secondary/40\" : \"\" // Styling for empty tiles\n\t\t\t)}\n\t\t\tstyle={{\n\t\t\t\tleft: col * 64, // 64px cell\n\t\t\t\ttop: row * 64,\n\t\t\t}}\n\t\t>\n\t\t\t{logo && (\n\t\t\t\t<img\n\t\t\t\t\talt={logo.alt}\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"pointer-events-none size-8 select-none object-contain p-1 dark:invert\"\n\t\t\t\t\t)}\n\t\t\t\t\theight={40}\n\t\t\t\t\tsrc={logo.src}\n\t\t\t\t\twidth={40}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n\n// Coordinate mapping to approximate the \"scattered\" look in the image.\n// Grid 6x5.\nconst tiles: TileData[] = [\n\t// Row 0\n\t{\n\t\trow: 0,\n\t\tcol: 1,\n\t\tlogo: {\n\t\t\tsrc: \"https://storage.efferd.com/logo/vercel.svg\",\n\t\t\talt: \"Vercel Logo\",\n\t\t},\n\t},\n\t{\n\t\trow: 0,\n\t\tcol: 3,\n\t\tlogo: {\n\t\t\tsrc: \"https://storage.efferd.com/logo/openai.svg\",\n\t\t\talt: \"OpenAI Logo\",\n\t\t},\n\t},\n\n\t// Row 1\n\t{ row: 1, col: 0 }, // Empty\n\t{\n\t\trow: 1,\n\t\tcol: 2,\n\t\tlogo: {\n\t\t\tsrc: \"https://storage.efferd.com/logo/cursor.svg\",\n\t\t\talt: \"Cursor Logo\",\n\t\t},\n\t},\n\t{\n\t\trow: 1,\n\t\tcol: 4,\n\t\tlogo: {\n\t\t\tsrc: \"https://storage.efferd.com/logo/v0.svg\",\n\t\t\talt: \"V0 Logo\",\n\t\t},\n\t},\n\n\t// Row 2\n\t{\n\t\trow: 2,\n\t\tcol: 1,\n\t\tlogo: {\n\t\t\tsrc: \"https://storage.efferd.com/logo/planetscale.svg\",\n\t\t\talt: \"Planetscale Logo\",\n\t\t},\n\t},\n\t{ row: 2, col: 3 }, // Empty\n\n\t// Row 3\n\n\t{ row: 3, col: 0 }, // Empty\n\t{\n\t\trow: 3,\n\t\tcol: 2,\n\t\tlogo: {\n\t\t\tsrc: \"https://storage.efferd.com/logo/base-ui.svg\",\n\t\t\talt: \"Base UI Logo\",\n\t\t},\n\t},\n\t{\n\t\trow: 3,\n\t\tcol: 4,\n\t\tlogo: {\n\t\t\tsrc: \"https://storage.efferd.com/logo/copilot.svg\",\n\t\t\talt: \"Copilot Logo\",\n\t\t},\n\t},\n\n\t// Row 4\n\t{\n\t\trow: 4,\n\t\tcol: 1,\n\t\tlogo: {\n\t\t\tsrc: \"https://storage.efferd.com/logo/github.svg\",\n\t\t\talt: \"GitHub Logo\",\n\t\t},\n\t},\n\t{\n\t\trow: 4,\n\t\tcol: 3,\n\t\tlogo: {\n\t\t\tsrc: \"https://storage.efferd.com/logo/dub.svg\",\n\t\t\talt: \"Dub Logo\",\n\t\t},\n\t},\n];\n"}]}