{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "ecommerce32",
  "title": "Shop by Brand Grid",
  "description": "Brand logo cards with product counts and hover effects linking to brand pages. Perfect for multi-brand stores and brand discovery.",
  "dependencies": [
    "clsx",
    "tailwind-merge"
  ],
  "registryDependencies": [
    "badge"
  ],
  "files": [
    {
      "path": "registry/ecommerce32/ecommerce32.tsx",
      "content": "\"use client\";\n\nimport { Badge } from \"@/components/ui/badge\";\nimport Link from \"next/link\";\nimport { cn } from \"@/lib/utils\";\n\ninterface Brand {\n  name: string;\n  logo: string;\n  href?: string;\n  productCount?: number;\n}\n\ninterface Ecommerce32Props {\n  badge?: {\n    label: string;\n    variant?: \"default\" | \"secondary\" | \"outline\";\n  };\n  heading?: string;\n  description?: string;\n  brands?: Brand[];\n  productCountLabel?: string;\n  className?: string;\n}\n\nexport const ecommerce32Demo: Ecommerce32Props = {\n  badge: { label: \"Brands\", variant: \"secondary\" },\n  heading: \"Shop by Brand\",\n  description: \"Discover your favorite brands all in one place\",\n  productCountLabel: \"products\",\n  brands: [\n    {\n      name: \"Nike\",\n      logo: \"https://oud.pics/sm/l/nike.png\",\n      href: \"https://beste.co\",\n      productCount: 342,\n    },\n    {\n      name: \"Adidas\",\n      logo: \"https://oud.pics/sm/l/adidas.png\",\n      href: \"https://beste.co\",\n      productCount: 287,\n    },\n    {\n      name: \"Puma\",\n      logo: \"https://oud.pics/sm/l/puma.png\",\n      href: \"https://beste.co\",\n      productCount: 198,\n    },\n    {\n      name: \"New Balance\",\n      logo: \"https://oud.pics/sm/l/new-balance.png\",\n      href: \"https://beste.co\",\n      productCount: 234,\n    },\n    {\n      name: \"Converse\",\n      logo: \"https://oud.pics/sm/l/converse.png\",\n      href: \"https://beste.co\",\n      productCount: 189,\n    },\n  ],\n};\n\nexport function Ecommerce32({\n  badge,\n  heading,\n  description,\n  brands = [],\n  productCountLabel,\n  className,\n}: Ecommerce32Props) {\n  return (\n    <section className={cn(\"py-16 md:py-24 w-full\", className)}>\n      <div className=\"mx-auto max-w-6xl px-4 md:px-6\">\n        {/* Header */}\n        {(badge || heading || description) && (\n          <div className=\"mx-auto mb-12 max-w-3xl text-center\">\n            {badge && (\n              <div className=\"mb-4 flex justify-center\">\n                <Badge variant={badge.variant ?? \"default\"}>{badge.label}</Badge>\n              </div>\n            )}\n            {heading && <h2 className=\"text-2xl font-semibold md:text-4xl\">{heading}</h2>}\n            {description && (\n              <p className=\"mt-4 text-base text-muted-foreground md:text-lg\">{description}</p>\n            )}\n          </div>\n        )}\n\n        {/* Brand Grid */}\n        <div className=\"flex flex-wrap justify-center gap-4\">\n          {brands.map((brand, index) => (\n            <Link\n              key={index}\n              href={brand.href ?? \"#\"}\n              className=\"group/ecommerce32-brand flex w-[calc(50%-0.5rem)] flex-col items-center justify-center rounded-xl border bg-background p-6 transition-all hover:border-primary hover:shadow-lg md:w-[calc(33.333%-0.75rem)] lg:w-[calc(16.666%-0.85rem)]\"\n            >\n              <div className=\"relative mb-3 flex h-12 w-full items-center justify-center grayscale transition-all group-hover/ecommerce32-brand:grayscale-0\">\n                <img\n                  src={brand.logo}\n                  alt={brand.name}\n                  width={100}\n                  height={48}\n                  className=\"max-h-full object-contain opacity-50 group-hover/ecommerce32-brand:opacity-100 transition-all duration-300\"\n                />\n              </div>\n              <p className=\"text-center text-sm font-medium\">{brand.name}</p>\n              {brand.productCount && productCountLabel && (\n                <p className=\"mt-1 text-xs text-muted-foreground\">\n                  {brand.productCount} {productCountLabel}\n                </p>\n              )}\n            </Link>\n          ))}\n        </div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/beste/block/ecommerce32.tsx"
    }
  ],
  "type": "registry:block"
}