{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "cart-01",
  "type": "registry:block",
  "title": "Cart 01",
  "files": [
    {
      "path": "src/components/commercn/carts/cart-01.tsx",
      "content": "\"use client\";\n\nimport {\n\tCard,\n\tCardContent,\n\tCardTitle,\n\tCardDescription,\n} from \"@/components/ui/card\";\nimport { Button } from \"@/components/ui/button\";\nimport { Minus, Plus, Trash2, Bookmark } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport { useState } from \"react\";\n\nconst cartItem = {\n\tid: 1,\n\tname: \"Apple AirPods Pro (2nd gen)\",\n\tcategory: \"Headphones\",\n\timage:\n\t\t\"https://images.unsplash.com/photo-1624258919367-5dc28f5dc293?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=1160\",\n\tprice: 129.0,\n\toriginalPrice: 129,\n\tquantity: 1,\n};\n\nexport function ShoppingCartOne() {\n\tconst [quantity, setQuantity] = useState(cartItem.quantity);\n\n\tconst incrementQuantity = () => setQuantity((prev) => prev + 1);\n\tconst decrementQuantity = () => setQuantity((prev) => Math.max(1, prev - 1));\n\n\treturn (\n\t\t<Card className=\"w-full max-w-[480px] bg-muted border-0 shadow-none rounded-xl not-prose p-4 flex-row gap-4\">\n\t\t\t<div className=\"w-20 h-20 bg-white rounded-xl overflow-hidden flex-shrink-0\">\n\t\t\t\t<img\n\t\t\t\t\tsrc={cartItem.image}\n\t\t\t\t\talt={cartItem.name}\n\t\t\t\t\tclassName=\"w-full h-full object-cover\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t<div className=\"flex-1 flex flex-col space-y-4\">\n\t\t\t\t<div className=\"flex gap-4\">\n\t\t\t\t\t<div className=\"flex-1\">\n\t\t\t\t\t\t<CardDescription>{cartItem.category}</CardDescription>\n\t\t\t\t\t\t<CardTitle>{cartItem.name}</CardTitle>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<Button size=\"icon\" variant=\"ghost\">\n\t\t\t\t\t\t<Trash2 className=\"h-4 w-4\" />\n\t\t\t\t\t</Button>\n\t\t\t\t</div>\n\n\t\t\t\t<div className=\"flex items-center justify-between\">\n\t\t\t\t\t<div className=\"flex items-center bg-background text-foreground rounded-lg border border-gray-200\">\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\tsize=\"icon\"\n\t\t\t\t\t\t\tclassName=\"h-8 w-8 rounded-lg hover:bg-muted\"\n\t\t\t\t\t\t\tonClick={decrementQuantity}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Minus className=\"h-4 w-4\" />\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t<span className=\"w-8 text-center text-sm font-medium\">\n\t\t\t\t\t\t\t{quantity}\n\t\t\t\t\t\t</span>\n\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\tsize=\"icon\"\n\t\t\t\t\t\t\tclassName=\"h-8 w-8 rounded-lg hover:bg-muted\"\n\t\t\t\t\t\t\tonClick={incrementQuantity}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Plus className=\"h-4 w-4\" />\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<p className=\"text-xl font-semibold\">\n\t\t\t\t\t\t${(cartItem.price * quantity).toFixed(2)}\n\t\t\t\t\t</p>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</Card>\n\t);\n}\n",
      "type": "registry:component"
    }
  ]
}