{"$schema":"https://ui.shadcn.com/schema/registry-item.json","type":"registry:block","registryDependencies":["@efferd/decor-icon"],"name":"logo-cloud-2","description":"Stylish logo grid featuring top tech brands with decorative plus icons and dynamic borders for a modern visual layout.","categories":["logo-cloud"],"files":[{"path":"registry/blocks/logo-cloud/2/logo-cloud.tsx","type":"registry:component","content":"import { cn } from \"@/lib/utils\";\nimport { DecorIcon } from \"@/components/decor-icon\";\n\ntype Logo = {\n\tsrc: string;\n\talt: string;\n};\n\nexport function LogoCloud() {\n\treturn (\n\t\t<div className=\"grid grid-cols-2 border md:grid-cols-4\">\n\t\t\t<LogoCard\n\t\t\t\tclassName=\"relative border-r border-b bg-secondary dark:bg-secondary/30\"\n\t\t\t\tlogo={{\n\t\t\t\t\tsrc: \"https://storage.efferd.com/logo/nvidia-wordmark.svg\",\n\t\t\t\t\talt: \"Nvidia Logo\",\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<DecorIcon className=\"z-10\" position=\"bottom-right\" />\n\t\t\t</LogoCard>\n\n\t\t\t<LogoCard\n\t\t\t\tclassName=\"border-b md:border-r\"\n\t\t\t\tlogo={{\n\t\t\t\t\tsrc: \"https://storage.efferd.com/logo/supabase-wordmark.svg\",\n\t\t\t\t\talt: \"Supabase Logo\",\n\t\t\t\t}}\n\t\t\t/>\n\n\t\t\t<LogoCard\n\t\t\t\tclassName=\"relative border-r border-b md:bg-secondary dark:md:bg-secondary/30\"\n\t\t\t\tlogo={{\n\t\t\t\t\tsrc: \"https://storage.efferd.com/logo/github-wordmark.svg\",\n\t\t\t\t\talt: \"GitHub Logo\",\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<DecorIcon className=\"z-10\" position=\"bottom-right\" />\n\t\t\t\t<DecorIcon className=\"z-10 hidden md:block\" position=\"bottom-left\" />\n\t\t\t</LogoCard>\n\n\t\t\t<LogoCard\n\t\t\t\tclassName=\"relative border-b bg-secondary md:bg-background dark:bg-secondary/30 md:dark:bg-background\"\n\t\t\t\tlogo={{\n\t\t\t\t\tsrc: \"https://storage.efferd.com/logo/openai-wordmark.svg\",\n\t\t\t\t\talt: \"OpenAI Logo\",\n\t\t\t\t}}\n\t\t\t/>\n\n\t\t\t<LogoCard\n\t\t\t\tclassName=\"relative border-r border-b bg-secondary md:border-b-0 md:bg-background dark:bg-secondary/30 md:dark:bg-background\"\n\t\t\t\tlogo={{\n\t\t\t\t\tsrc: \"https://storage.efferd.com/logo/turso-wordmark.svg\",\n\t\t\t\t\talt: \"Turso Logo\",\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<DecorIcon className=\"z-10 md:hidden\" position=\"bottom-right\" />\n\t\t\t</LogoCard>\n\n\t\t\t<LogoCard\n\t\t\t\tclassName=\"border-b bg-background md:border-r md:border-b-0 md:bg-secondary dark:md:bg-secondary/30\"\n\t\t\t\tlogo={{\n\t\t\t\t\tsrc: \"https://storage.efferd.com/logo/clerk-wordmark.svg\",\n\t\t\t\t\talt: \"Clerk Logo\",\n\t\t\t\t}}\n\t\t\t/>\n\n\t\t\t<LogoCard\n\t\t\t\tclassName=\"border-r\"\n\t\t\t\tlogo={{\n\t\t\t\t\tsrc: \"https://storage.efferd.com/logo/claude-wordmark.svg\",\n\t\t\t\t\talt: \"Claude AI Logo\",\n\t\t\t\t}}\n\t\t\t/>\n\n\t\t\t<LogoCard\n\t\t\t\tclassName=\"bg-secondary dark:bg-secondary/30\"\n\t\t\t\tlogo={{\n\t\t\t\t\tsrc: \"https://storage.efferd.com/logo/vercel-wordmark.svg\",\n\t\t\t\t\talt: \"Vercel Logo\",\n\t\t\t\t}}\n\t\t\t/>\n\t\t</div>\n\t);\n}\n\ntype LogoCardProps = React.ComponentProps<\"div\"> & {\n\tlogo: Logo;\n};\n\nfunction LogoCard({ logo, className, children, ...props }: LogoCardProps) {\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t\"flex items-center justify-center bg-background px-4 py-8 md:p-8\",\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={logo.alt}\n\t\t\t\tclassName=\"pointer-events-none h-4 select-none md:h-5 dark:brightness-0 dark:invert\"\n\t\t\t\theight=\"auto\"\n\t\t\t\tsrc={logo.src}\n\t\t\t\twidth=\"auto\"\n\t\t\t/>\n\t\t\t{children}\n\t\t</div>\n\t);\n}\n"}]}