{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "product-card-03",
  "type": "registry:block",
  "title": "Product Card 03",
  "files": [
    {
      "path": "src/components/commercn/product-cards/product-card-03.tsx",
      "content": "\"use client\";\n\nimport { Card, CardContent } from \"@/components/ui/card\";\nimport { Button } from \"@/components/ui/button\";\nimport { Bookmark, PlusIcon } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport { useState } from \"react\";\n\nconst data = {\n\ttitle: \"Mojo Soft Drink\",\n\tvarients: [\n\t\t{\n\t\t\tsize: \"250 ML\",\n\t\t\tprice: 1.25,\n\t\t},\n\t\t{\n\t\t\tsize: \"500 ML\",\n\t\t\tprice: 2.5,\n\t\t},\n\t],\n\tcurrency: \"$\",\n\timage:\n\t\t\"https://pub-5f7cbdfd9ffa4c838e386788f395f0c4.r2.dev/products/mojo_can.png\",\n};\n\nexport function ProductCardThree() {\n\tconst [selectedVariant, setSelectedVariant] = useState(0);\n\tconst [isBookmarked, setIsBookmarked] = useState(false);\n\n\treturn (\n\t\t<Card\n\t\t\tclassName={cn(\n\t\t\t\t\"w-full max-w-[320px] mx-auto border-2 border-black shadow-none rounded-none overflow-hidden p-0 not-prose\",\n\t\t\t)}\n\t\t>\n\t\t\t<CardContent className=\"p-0\">\n\t\t\t\t<div className=\"relative aspect-[1/1]\">\n\t\t\t\t\t<img\n\t\t\t\t\t\tsrc={data.image}\n\t\t\t\t\t\talt={data.title}\n\t\t\t\t\t\tclassName=\"w-full h-full object-cover\"\n\t\t\t\t\t/>\n\n\t\t\t\t\t<Button\n\t\t\t\t\t\tvariant=\"outline\"\n\t\t\t\t\t\tsize=\"icon\"\n\t\t\t\t\t\tclassName=\"absolute top-4 right-4 rounded-none border-2 border-black\"\n\t\t\t\t\t\tonClick={() => setIsBookmarked(!isBookmarked)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Bookmark\n\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\"w-5 h-5 transition-colors\",\n\t\t\t\t\t\t\t\tisBookmarked ? \"fill-black text-black\" : \"text-foreground\",\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</Button>\n\t\t\t\t</div>\n\n\t\t\t\t<div className=\"p-4\">\n\t\t\t\t\t<div className=\"text-center mb-4\">\n\t\t\t\t\t\t<h3 className=\"text-2xl mb-1\">{data.title}</h3>\n\t\t\t\t\t\t<p className=\"text-4xl font-bold\">\n\t\t\t\t\t\t\t{data.currency}\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tkey={selectedVariant}\n\t\t\t\t\t\t\t\tclassName=\"inline-block animate-in fade-in slide-in-from-top-2 duration-300\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{data.varients[selectedVariant].price.toFixed(2)}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div className=\"flex gap-2 mb-6 justify-center\">\n\t\t\t\t\t\t{data.varients.map((variant, index) => (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\t\t\tvariant=\"outline\"\n\t\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\t\tonClick={() => setSelectedVariant(index)}\n\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\"rounded-none border-2\",\n\t\t\t\t\t\t\t\t\tselectedVariant === index\n\t\t\t\t\t\t\t\t\t\t? \"border-red-500 text-red-500 hover:bg-red-50 hover:text-red-600\"\n\t\t\t\t\t\t\t\t\t\t: \"border-foreground text-foreground\",\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{variant.size}\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<Button size=\"lg\" className=\"rounded-none w-full\">\n\t\t\t\t\t\t<PlusIcon className=\"ml-2 size-4\" />\n\t\t\t\t\t\tAdd to Cart\n\t\t\t\t\t</Button>\n\t\t\t\t</div>\n\t\t\t</CardContent>\n\t\t</Card>\n\t);\n}\n",
      "type": "registry:component"
    }
  ]
}