{"$schema":"https://ui.shadcn.com/schema/registry-item.json","type":"registry:block","registryDependencies":[],"name":"integrations-4","description":"Split layout with heading and scattered rounded integration cards with mask.","categories":["integrations"],"files":[{"path":"registry/blocks/integrations/4/integrations.tsx","type":"registry:component","content":"import { cn } from \"@/lib/utils\";\n\ntype LogoType = {\n\tsrc: string;\n\talt: string;\n\tisInvertable?: boolean;\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=\"mx-auto grid max-w-5xl grid-cols-1 gap-12 p-4 md:grid-cols-2 md:items-center\">\n\t\t\t{/* Left Content */}\n\t\t\t<div className=\"max-w-xl space-y-5\">\n\t\t\t\t<h2 className=\"font-medium text-3xl text-foreground tracking-tight sm:text-4xl md:text-5xl\">\n\t\t\t\t\tSeamless Integration\n\t\t\t\t</h2>\n\t\t\t\t<p className=\"text-lg text-muted-foreground leading-8\">\n\t\t\t\t\tIntegrate with over 100+ tools and platforms to streamline your\n\t\t\t\t\tworkflow and boost productivity.\n\t\t\t\t</p>\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=\"mask-[radial-gradient(ellipse_at_center,black,black,transparent)] relative size-90\">\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\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-18 items-center justify-center rounded-md border\",\n\t\t\t\tlogo\n\t\t\t\t\t? \"bg-card shadow-xs dark:bg-card/60\"\n\t\t\t\t\t: \"bg-secondary/30 dark:bg-background\" // Styling for empty tiles\n\t\t\t)}\n\t\t\tstyle={{\n\t\t\t\tleft: col * 72, // 72px cell\n\t\t\t\ttop: row * 72,\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\",\n\t\t\t\t\t\tlogo.isInvertable && \"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 5x5.\nconst tiles: TileData[] = [\n\t// Row 0\n\t{\n\t\trow: 0,\n\t\tcol: 1,\n\t},\n\t{\n\t\trow: 0,\n\t\tcol: 3,\n\t\tlogo: {\n\t\t\tsrc: \"https://storage.efferd.com/logo/notion.svg\",\n\t\t\talt: \"Notion 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\tisInvertable: true,\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/vercel.svg\",\n\t\t\talt: \"Vercel Logo\",\n\t\t\tisInvertable: true,\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\tisInvertable: true,\n\t\t},\n\t},\n\t{\n\t\trow: 2,\n\t\tcol: 3,\n\t\tlogo: {\n\t\t\tsrc: \"https://storage.efferd.com/logo/gmail.svg\",\n\t\t\talt: \"Gmail Logo\",\n\t\t},\n\t}, // 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/supabase.svg\",\n\t\t\talt: \"Supabase 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/canva.svg\",\n\t\t\talt: \"Canva 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/adobe.svg\",\n\t\t\talt: \"Adobe 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/polar.svg\",\n\t\t\talt: \"Polar Logo\",\n\t\t},\n\t},\n];\n"}]}