{"$schema":"https://ui.shadcn.com/schema/registry-item.json","type":"registry:block","registryDependencies":["@efferd/decor-icon"],"name":"integrations-2","description":"Grid layout with bordered integration cards and decorative plus icons.","categories":["integrations"],"files":[{"path":"registry/blocks/integrations/2/integrations.tsx","type":"registry:component","content":"import { cn } from \"@/lib/utils\";\nimport { DecorIcon } from \"@/components/decor-icon\";\n\ntype Integration = {\n\tsrc: string;\n\tname: string;\n\tdescription: string;\n\tisInvertable?: boolean;\n\ticon?: React.ReactNode;\n};\n\nconst data: Integration[] = [\n\t{\n\t\tsrc: \"https://storage.efferd.com/logo/vercel.svg\",\n\t\tname: \"Vercel\",\n\t\tdescription:\n\t\t\t\"Amet praesentium deserunt ex commodi tempore fuga voluptatem....\",\n\t\tisInvertable: true,\n\t},\n\t{\n\t\tsrc: \"https://storage.efferd.com/logo/openai.svg\",\n\t\tname: \"OpenAI\",\n\t\tdescription:\n\t\t\t\"Amet praesentium deserunt ex commodi tempore fuga voluptatem....\",\n\t\tisInvertable: true,\n\t\ticon: <DecorIcon position=\"bottom-left\" />,\n\t},\n\t{\n\t\tsrc: \"https://storage.efferd.com/logo/supabase.svg\",\n\t\tname: \"Supabase\",\n\t\tdescription:\n\t\t\t\"Amet praesentium deserunt ex commodi tempore fuga voluptatem....\",\n\t},\n\t{\n\t\tsrc: \"https://storage.efferd.com/logo/github.svg\",\n\t\tname: \"GitHub\",\n\t\tdescription:\n\t\t\t\"Amet praesentium deserunt ex commodi tempore fuga voluptatem....\",\n\t\tisInvertable: true,\n\t},\n\t{\n\t\tsrc: \"https://storage.efferd.com/logo/notion.svg\",\n\t\tname: \"Notion\",\n\t\tdescription:\n\t\t\t\"Amet praesentium deserunt ex commodi tempore fuga voluptatem....\",\n\t},\n\t{\n\t\tsrc: \"https://storage.efferd.com/logo/gmail.svg\",\n\t\tname: \"Gmail\",\n\t\tdescription:\n\t\t\t\"Amet praesentium deserunt ex commodi tempore fuga voluptatem....\",\n\t\ticon: <DecorIcon position=\"top-left\" />,\n\t},\n];\n\nexport function Integrations() {\n\treturn (\n\t\t<div className=\"relative mx-auto max-w-5xl border\">\n\t\t\t<div className=\"grid grid-cols-2 gap-px bg-border md:grid-cols-3\">\n\t\t\t\t{data.map((item) => (\n\t\t\t\t\t<IntegrationCard integration={item} key={item.name}>\n\t\t\t\t\t\t{item.icon}\n\t\t\t\t\t</IntegrationCard>\n\t\t\t\t))}\n\t\t\t</div>\n\t\t\t<DecorIcon position=\"top-left\" />\n\t\t\t<DecorIcon position=\"top-right\" />\n\t\t\t<DecorIcon position=\"bottom-left\" />\n\t\t\t<DecorIcon position=\"bottom-right\" />\n\t\t</div>\n\t);\n}\n\nfunction IntegrationCard({\n\tintegration,\n\tclassName,\n\tchildren,\n\t...props\n}: React.ComponentProps<\"div\"> & {\n\tintegration: Integration;\n}) {\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t\"relative flex flex-col items-start gap-4 bg-background p-4 text-start md:p-6 md:even:bg-background/75\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<img\n\t\t\t\talt={integration.name}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"pointer-events-none size-8 shrink-0 select-none object-contain\",\n\t\t\t\t\tintegration.isInvertable && \"dark:invert\"\n\t\t\t\t)}\n\t\t\t\theight={32}\n\t\t\t\tsrc={integration.src}\n\t\t\t\twidth={32}\n\t\t\t/>\n\t\t\t<div className=\"space-y-1\">\n\t\t\t\t<h3 className=\"font-semibold\">{integration.name}</h3>\n\t\t\t\t<p className=\"text-muted-foreground text-xs md:text-sm\">\n\t\t\t\t\t{integration.description}\n\t\t\t\t</p>\n\t\t\t</div>\n\t\t\t{children}\n\t\t</div>\n\t);\n}\n"}]}