{
  "name": "cart-01-block-ex",
  "type": "registry:example",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "https://ui.stackzero.co/r/cart-01-block.json"
  ],
  "files": [
    {
      "type": "registry:example",
      "content": "\"use client\";\n\nimport Cart_01, {\n  CartCheckoutPayload,\n  CartProduct,\n} from \"@/components/commerce-ui/cart-01\";\nimport { Button } from \"@/components/ui/button\";\nimport { useEffect, useState } from \"react\";\n\nexport default function CartExample_01() {\n  // Initial products for the demo\n  const initialProducts: CartProduct[] = [\n    {\n      id: \"prod-1\",\n      imageUrl:\n        \"https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/headphone-1.jpg\",\n      name: \"Wireless Headphones\",\n      price: 98.96,\n      quantity: 1,\n    },\n    {\n      id: \"prod-2\",\n      imageUrl:\n        \"https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/smartwatch-01.jpg\",\n      name: \"Smart Watch\",\n      price: 129.99,\n      quantity: 2,\n    },\n    {\n      id: \"prod-3\",\n      imageUrl:\n        \"https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/speaker-01.jpg\",\n      name: \"Bluetooth Speaker\",\n      price: 79.95,\n      quantity: 1,\n    },\n  ];\n\n  // State management\n  const [products, setProducts] = useState<CartProduct[]>(initialProducts);\n  const [subtotal, setSubtotal] = useState<number>(0);\n  const [shippingCost] = useState<number>(15.99);\n  const [vatRate] = useState<number>(0.2); // 20% VAT rate\n  const [isLoading, setIsLoading] = useState<boolean>(false);\n  const [errorMessage, setErrorMessage] = useState<string>(\"\");\n\n  // Calculate subtotal whenever the products change\n  useEffect(() => {\n    const newSubtotal = products.reduce(\n      (total, product) => total + product.price * product.quantity,\n      0\n    );\n    setSubtotal(newSubtotal);\n  }, [products]);\n\n  // Handler to update product quantity\n  const handleUpdateQuantity = (productId: string, newQuantity: number) => {\n    setProducts(\n      products.map((product) =>\n        product.id === productId\n          ? { ...product, quantity: newQuantity }\n          : product\n      )\n    );\n  };\n\n  // Handler to remove a product\n  const handleRemoveProduct = (productId: string) => {\n    setProducts(products.filter((product) => product.id !== productId));\n  };\n\n  // Handler for checkout\n  const handleCheckout = (payload: CartCheckoutPayload) => {\n    const itemCount = payload.products.reduce((sum, p) => sum + p.quantity, 0);\n    window.alert(\n      `Proceeding to checkout with ${itemCount} items.\\nTotal: ${payload.currencyPrefix}${payload.totalAmount.toFixed(2)}\n      `\n    );\n  };\n\n  // Handler for continue shopping\n  const handleContinueShopping = (payload: CartCheckoutPayload) => {\n    if (payload.products.length === 0) {\n      window.alert(\"Starting your shopping journey!\");\n    } else {\n      const itemCount = payload.products.reduce(\n        (sum, p) => sum + p.quantity,\n        0\n      );\n      window.alert(\n        `Continuing shopping with ${itemCount} items in your cart.\\nSubtotal: ${payload.currencyPrefix}${payload.subtotal.toFixed(2)}\n        `\n      );\n    }\n  };\n\n  // Add a demo product\n  const handleAddDemoProduct = () => {\n    const demoProducts = [\n      {\n        id: `demo-${Date.now()}`,\n        imageUrl:\n          \"https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/speaker-01.jpg\",\n        name: \"SoundSphere Ultra Wireless Speaker\",\n        price: 49.99,\n        quantity: 1,\n      },\n      {\n        id: `demo-${Date.now() + 1}`,\n        imageUrl:\n          \"https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/headphone-4.jpg\",\n        name: \"AeroTune X9\",\n        price: 89.95,\n        quantity: 1,\n      },\n    ];\n\n    const randomProduct =\n      demoProducts[Math.floor(Math.random() * demoProducts.length)];\n    setProducts([...products, randomProduct]);\n  };\n\n  // Reset cart to initial state\n  const handleResetCart = () => {\n    setProducts(initialProducts);\n    setErrorMessage(\"\");\n  };\n\n  // Clear cart\n  const handleClearCart = () => {\n    setProducts([]);\n    setErrorMessage(\"\");\n  };\n\n  // Toggle loading state\n  const handleToggleLoading = () => {\n    setIsLoading(!isLoading);\n    if (errorMessage) {\n      setErrorMessage(\"\");\n    }\n  };\n\n  // Toggle error state\n  const handleToggleError = () => {\n    if (errorMessage) {\n      setErrorMessage(\"\");\n    } else {\n      setErrorMessage(\"Unable to load cart items. Please try again later.\");\n    }\n    if (isLoading) {\n      setIsLoading(false);\n    }\n  };\n\n  return (\n    <div className=\"mx-auto w-full max-w-3xl py-8\">\n      <div className=\"mb-6 flex flex-wrap justify-center gap-4\">\n        <Button\n          onClick={handleAddDemoProduct}\n          variant=\"outline\"\n          className=\"font-mono\"\n          size=\"sm\"\n        >\n          Add Demo Product\n        </Button>\n\n        <Button\n          onClick={handleResetCart}\n          variant=\"outline\"\n          className=\"font-mono\"\n          size=\"sm\"\n        >\n          Reset Cart\n        </Button>\n\n        <Button\n          onClick={handleClearCart}\n          variant=\"outline\"\n          className=\"font-mono\"\n          size=\"sm\"\n        >\n          Clear Cart\n        </Button>\n\n        <Button\n          onClick={handleToggleLoading}\n          variant=\"outline\"\n          className={`font-mono ${\n            isLoading ? \"border-blue-500 text-blue-500\" : \"\"\n          }`}\n          size=\"sm\"\n        >\n          {isLoading ? \"Stop Loading\" : \"Simulate Loading\"}\n        </Button>\n\n        <Button\n          onClick={handleToggleError}\n          variant=\"outline\"\n          className={`font-mono ${\n            errorMessage ? \"border-red-500 text-red-500\" : \"\"\n          }`}\n          size=\"sm\"\n        >\n          {errorMessage ? \"Clear Error\" : \"Simulate Error\"}\n        </Button>\n      </div>\n\n      <Cart_01\n        storeName=\"TechGadgets Store\"\n        logoUrl=\"https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/logo-05.png\"\n        products={products}\n        subtotal={subtotal}\n        shippingCost={shippingCost}\n        vatRate={vatRate}\n        currencyPrefix=\"$\"\n        isLoading={isLoading}\n        errorMessage={errorMessage}\n        onUpdateQuantity={handleUpdateQuantity}\n        onRemoveProduct={handleRemoveProduct}\n        onCheckout={handleCheckout}\n        onContinueShopping={handleContinueShopping}\n      />\n    </div>\n  );\n}\n",
      "path": "/components/commerce-ui/blocks/carts/cart-01-ex.tsx",
      "target": "components/commerce-ui/cart-01-ex.tsx"
    }
  ]
}