{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "ecommerce1",
  "title": "Product Card Grid",
  "description": "Responsive product grid with ratings, sale badges, and add to cart buttons. Perfect for shop pages and product catalogs.",
  "dependencies": [
    "clsx",
    "tailwind-merge",
    "lucide-react"
  ],
  "registryDependencies": [
    "badge",
    "button"
  ],
  "files": [
    {
      "path": "registry/ecommerce1/ecommerce1.tsx",
      "content": "\"use client\";\n\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { ShoppingCart } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\n\ninterface Product {\n  name: string;\n  price: number;\n  originalPrice?: number;\n  image: string;\n  badge?: string;\n  rating?: number;\n  reviewCount?: number;\n}\n\ninterface Ecommerce1Props {\n  badge?: {\n    label: string;\n    variant?: \"default\" | \"secondary\" | \"outline\";\n  };\n  heading?: string;\n  description?: string;\n  products?: Product[];\n  currency?: string;\n  onAddToCart?: (product: Product) => void;\n  className?: string;\n}\n\nexport const ecommerce1Demo: Ecommerce1Props = {\n  badge: { label: \"New Arrivals\", variant: \"outline\" },\n  heading: \"Shop our latest collection\",\n  description: \"Discover our handpicked selection of premium products designed for modern living.\",\n  currency: \"$\",\n  products: [\n    {\n      name: \"Minimal Desk Lamp\",\n      price: 89,\n      originalPrice: 129,\n      image:\n        \"https://images.unsplash.com/photo-1731762524352-b5663f83a830?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0\",\n      badge: \"Sale\",\n      rating: 4.8,\n      reviewCount: 124,\n    },\n    {\n      name: \"Ceramic Vase Set\",\n      price: 65,\n      image:\n        \"https://images.unsplash.com/photo-1654856842864-145a630cd603?w=900&auto=format&fit=crop&q=60\",\n      rating: 4.9,\n      reviewCount: 89,\n    },\n    {\n      name: \"Wooden Side Table\",\n      price: 199,\n      image:\n        \"https://images.unsplash.com/photo-1749703836810-361f30aba87a?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0\",\n      badge: \"Bestseller\",\n      rating: 4.7,\n      reviewCount: 256,\n    },\n    {\n      name: \"Linen Throw Blanket\",\n      price: 79,\n      originalPrice: 99,\n      image:\n        \"https://images.unsplash.com/photo-1745613999710-1aaf60145502?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0\",\n      rating: 4.6,\n      reviewCount: 67,\n    },\n  ],\n};\n\nexport function Ecommerce1({\n  badge,\n  heading,\n  description,\n  products = [],\n  currency = \"$\",\n  onAddToCart,\n  className,\n}: Ecommerce1Props) {\n  if (products.length === 0) return null;\n\n  const productCount = products.length;\n  const gridCols =\n    productCount % 4 === 0\n      ? \"lg:grid-cols-4\"\n      : productCount % 3 === 0 || productCount > 4\n        ? \"lg:grid-cols-3\"\n        : \"lg:grid-cols-2\";\n\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-8 md: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 md:text-lg text-muted-foreground\">{description}</p>\n            )}\n          </div>\n        )}\n\n        {/* Products Grid */}\n        <div className={cn(\"grid gap-6 sm:grid-cols-2\", gridCols)}>\n          {products.map((product, index) => (\n            <div\n              key={index}\n              className=\"group/ecommerce1 relative rounded-lg border bg-card overflow-hidden transition-all hover:shadow-lg\"\n            >\n              {/* Image */}\n              <div className=\"relative aspect-square overflow-hidden bg-muted\">\n                <img\n                  src={product.image}\n                  width={500}\n                  height={500}\n                  alt={product.name}\n                  className=\"size-full object-cover transition-transform duration-300 group-hover/ecommerce1:scale-105\"\n                />\n                {product.badge && (\n                  <Badge className=\"absolute left-3 top-3\" variant=\"secondary\">\n                    {product.badge}\n                  </Badge>\n                )}\n              </div>\n\n              {/* Content */}\n              <div className=\"p-4\">\n                <h3 className=\"font-medium\">{product.name}</h3>\n\n                {/* Rating */}\n                {product.rating && (\n                  <div className=\"mt-1 flex items-center gap-1 text-sm text-muted-foreground\">\n                    <span className=\"text-yellow-500\">★</span>\n                    <span>{product.rating}</span>\n                    {product.reviewCount && <span>({product.reviewCount})</span>}\n                  </div>\n                )}\n\n                {/* Price */}\n                <div className=\"mt-2 flex items-center gap-2\">\n                  <span className=\"text-lg font-semibold\">\n                    {currency}\n                    {product.price}\n                  </span>\n                  {product.originalPrice && (\n                    <span className=\"text-sm text-muted-foreground line-through\">\n                      {currency}\n                      {product.originalPrice}\n                    </span>\n                  )}\n                </div>\n\n                {/* Add to Cart */}\n                <Button className=\"mt-4 w-full\" size=\"lg\" onClick={() => onAddToCart?.(product)}>\n                  <ShoppingCart className=\"size-4\" />\n                  Add to Cart\n                </Button>\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/beste/block/ecommerce1.tsx"
    }
  ],
  "type": "registry:block"
}