{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "cart-02",
  "type": "registry:block",
  "title": "Cart 02",
  "files": [
    {
      "path": "src/components/commercn/carts/cart-02.tsx",
      "content": "\"use client\";\n\nimport { Card, CardTitle } from \"@/components/ui/card\";\nimport { Button } from \"@/components/ui/button\";\nimport { X, Minus, Plus } from \"lucide-react\";\nimport { useState } from \"react\";\n\nconst cartItem = {\n\tid: 1,\n\tname: \"Mojo Soft Drink\",\n\timage:\n\t\t\"https://pub-5f7cbdfd9ffa4c838e386788f395f0c4.r2.dev/products/mojo_can.png\",\n\tprice: 1.25,\n\tvariants: {\n\t\tcolor: [\"BLACK\", \"WHITE\", \"BROWN\"],\n\t\tsize: [\"US 7\", \"US 8\", \"US 9\", \"US 10\", \"US 11\"],\n\t},\n\tsize: \"250 ml\",\n\tselectedColor: \"BLACK\",\n\tselectedSize: \"US 8\",\n\tquantity: 1,\n};\n\nexport function ShoppingCartTwo() {\n\tconst [selectedColor, setSelectedColor] = useState(cartItem.selectedColor);\n\tconst [selectedSize, setSelectedSize] = useState(cartItem.selectedSize);\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-[400px] border border-black dark:border-white rounded-none shadow-none p-4 flex-row gap-4 not-prose\">\n\t\t\t{/* Product Image */}\n\t\t\t<div className=\"w-28 h-28 border border-black dark:border-white\">\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\n\t\t\t{/* Product Details */}\n\t\t\t<div className=\"flex-1 flex flex-col justify-between\">\n\t\t\t\t<div>\n\t\t\t\t\t<CardTitle className=\"text-xl font-medium tracking-wide\">\n\t\t\t\t\t\t{cartItem.name} ({cartItem.size})\n\t\t\t\t\t</CardTitle>\n\t\t\t\t\t<p className=\"text-lg text-red-500 font-bold tracking-wide\">\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\n\t\t\t\t{/* Variant Selectors */}\n\t\t\t\t<div className=\"flex gap-2\">\n\t\t\t\t\t<div className=\"flex items-center border border-black dark:border-white rounded-none\">\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-sm\"\n\t\t\t\t\t\t\tclassName=\"rounded-none hover:bg-black hover:text-white\"\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=\"px-4 text-sm text-center font-medium\">\n\t\t\t\t\t\t\t{quantity}\n\t\t\t\t\t\t</span>\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-sm\"\n\t\t\t\t\t\t\tclassName=\"rounded-none hover:bg-black hover:text-white\"\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\t\t\t\t\t<Button\n\t\t\t\t\t\tsize=\"icon-sm\"\n\t\t\t\t\t\tvariant=\"outline\"\n\t\t\t\t\t\tclassName=\"rounded-none border-black dark:border-white hover:bg-black hover:text-white h-full\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<X className=\"h-4 w-4\" />\n\t\t\t\t\t</Button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</Card>\n\t);\n}\n",
      "type": "registry:component"
    }
  ]
}