{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "logo-grid",
  "title": "Logo Grid",
  "description": "Grid of client logos with plus-sign separators and highlighted rows.",
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/radix-nova/logo-grid/logo-grid.tsx",
      "content": "\"use client\"\r\n\r\nimport React, { memo, useMemo } from \"react\"\r\nimport { cn } from \"@/lib/utils\"\r\nimport { PlusIcon } from \"lucide-react\"\r\n\r\nexport type Logo = {\r\n  src: string\r\n  alt: string\r\n  width?: number\r\n  height?: number\r\n}\r\n\r\nconst LogoImage = memo(function LogoImage({ logo }: { logo: Logo }) {\r\n  return (\r\n    <img\r\n      alt={logo.alt}\r\n      src={logo.src}\r\n      width={logo.width}\r\n      height={logo.height}\r\n      loading=\"lazy\"\r\n      className=\"pointer-events-none h-4 select-none md:h-5 dark:brightness-0 dark:invert\"\r\n    />\r\n  )\r\n})\r\n\r\ntype LogoCardProps = React.ComponentProps<\"div\"> & { logo: Logo }\r\n\r\nconst LogoCard = memo(function LogoCard({\r\n  logo,\r\n  className,\r\n  children,\r\n  ...props\r\n}: LogoCardProps) {\r\n  return (\r\n    <div\r\n      className={cn(\r\n        \"relative flex items-center justify-center bg-background px-4 py-8 md:p-8\",\r\n        className\r\n      )}\r\n      {...props}\r\n    >\r\n      <LogoImage logo={logo} />\r\n      {children}\r\n    </div>\r\n  )\r\n})\r\n\r\nexport const LogoGrid = memo(function LogoGrid({\r\n  logos,\r\n  className,\r\n}: {\r\n  logos: Logo[]\r\n  className?: string\r\n}) {\r\n  const gridLogos = useMemo(() => logos.slice(0, 8), [logos])\r\n\r\n  return (\r\n    <div\r\n      className={cn(\r\n        \"relative grid grid-cols-2 border-x md:grid-cols-4\",\r\n        className\r\n      )}\r\n    >\r\n      <div className=\"-translate-x-1/2 -top-px pointer-events-none absolute left-1/2 w-screen border-t\" />\r\n\r\n      {gridLogos.map((logo, i) => {\r\n        const isHighlighted = i === 0 || i === 2 || i === 5 || i === 7\r\n\r\n        return (\r\n          <LogoCard\r\n            key={logo.alt}\r\n            logo={logo}\r\n            className={cn(\r\n              i < 4 && \"border-b\",\r\n              (i === 4 || i === 5) && \"border-b md:border-b-0\",\r\n              (i === 0 || i === 2 || i === 4 || i === 6) && \"border-r\",\r\n              (i === 1 || i === 5) && \"md:border-r\",\r\n              isHighlighted\r\n                ? \"bg-secondary dark:bg-secondary/30\"\r\n                : \"bg-background\"\r\n            )}\r\n          >\r\n            {(i === 0 || i === 1 || i === 2) && (\r\n              <PlusIcon\r\n                className=\"-right-[12.5px] -bottom-[12.5px] absolute z-10 hidden size-6 md:block text-slate-800 dark:text-slate-300\"\r\n                strokeWidth={1}\r\n              />\r\n            )}\r\n            {(i === 0 || i === 2 || i === 4) && (\r\n              <PlusIcon\r\n                className=\"-right-[12.5px] -bottom-[12.5px] absolute z-10 size-6 md:hidden text-slate-800 dark:text-slate-300\"\r\n                strokeWidth={1}\r\n              />\r\n            )}\r\n          </LogoCard>\r\n        )\r\n      })}\r\n\r\n      <div className=\"-translate-x-1/2 -bottom-px pointer-events-none absolute left-1/2 w-screen border-b\" />\r\n    </div>\r\n  )\r\n})\r\n\r\nLogoGrid.displayName = \"LogoGrid\"",
      "type": "registry:component",
      "target": "@components/grootstudio/logo-grid.tsx"
    }
  ],
  "type": "registry:block"
}