{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "product-card",
  "type": "registry:ui",
  "title": "Product card",
  "description": "A storefront product tile with a square image, an optional corner badge like Sale or New, the product title, price and an Add to cart button when onAdd is set.",
  "dependencies": [],
  "registryDependencies": [
    "https://ui.minidev.pro/r/aspect-ratio.json",
    "https://ui.minidev.pro/r/button.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/product-card.tsx",
      "type": "registry:ui",
      "target": "components/ui/product-card.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { AspectRatio } from \"@/components/ui/aspect-ratio\"\n\nfunction ProductCard({\n  title,\n  price,\n  image,\n  badge,\n  onAdd,\n  className,\n}: {\n  title: string\n  price: string\n  image?: string\n  badge?: string\n  onAdd?: () => void\n  className?: string\n}) {\n  return (\n    <div data-slot=\"product-card\" className={cn(\"w-full max-w-64 overflow-hidden rounded-xl border border-border bg-surface shadow-raised\", className)}>\n      <AspectRatio ratio={1} className=\"bg-sunken\">\n        {image ? (\n          // eslint-disable-next-line @next/next/no-img-element\n          <img src={image} alt=\"\" className=\"absolute inset-0 size-full object-cover\" />\n        ) : null}\n        {badge ? (\n          <span className=\"absolute top-2 left-2 rounded-md border border-border bg-raised px-1.5 py-0.5 text-[11px] font-medium text-fg\">\n            {badge}\n          </span>\n        ) : null}\n      </AspectRatio>\n      <div className=\"space-y-3 p-4\">\n        <div>\n          <h3 className=\"text-sm font-medium text-fg\">{title}</h3>\n          <p className=\"mt-1 text-sm tabular-nums text-fg-muted\">{price}</p>\n        </div>\n        {onAdd ? (\n          <Button type=\"button\" variant=\"outline\" size=\"sm\" className=\"w-full\" onClick={onAdd}>\n            Add to cart\n          </Button>\n        ) : null}\n      </div>\n    </div>\n  )\n}\nexport { ProductCard }\n"
    }
  ]
}