{
  "name": "product-variant-01-block-ex",
  "type": "registry:example",
  "dependencies": [],
  "registryDependencies": [
    "https://ui.stackzero.co/r/product-variant-01-block.json"
  ],
  "files": [
    {
      "type": "registry:example",
      "content": "\"use client\";\n\n// Example usage of ProductVariant_01 component\n\nimport { useState } from \"react\";\nimport ProductVariant_01, {\n  VariantItem,\n  VariantSelectionPayload,\n} from \"@/components/commerce-ui/product-variants-01\";\n\nconst EXAMPLE_VARIANTS: VariantItem[] = [\n  {\n    availableQuantity: 5,\n    id: \"variant-sport\",\n    imageUrl:\n      \"https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/headphone-1.jpg\",\n    isInStock: true,\n    label: \"Sport\",\n    price: 109.99,\n    value: \"variant-sport\",\n  },\n  {\n    availableQuantity: 10,\n    id: \"variant-prosound\",\n    imageUrl:\n      \"https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/headphone-2.jpg\",\n    isInStock: true,\n    label: \"ProSound\",\n    price: 99.99,\n    salePrice: 89.99,\n    value: \"variant-prosound\",\n  },\n  {\n    availableQuantity: 0,\n    id: \"variant-ultraquiet\",\n    imageUrl:\n      \"https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/headphone-3.jpg\",\n    isInStock: false,\n    label: \"UltraQuiet™\",\n    price: 89.99,\n    value: \"variant-ultraquiet\",\n  },\n  {\n    availableQuantity: 2,\n    id: \"variant-extremesilence\",\n    imageUrl:\n      \"https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/headphone-4.jpg\",\n    isInStock: true,\n    label: \"ExtremeSilence™\",\n    price: 119.99,\n    salePrice: 99.99,\n    value: \"variant-extremesilence\",\n  },\n];\n\nexport default function ProductVariantExample() {\n  const [selectedVariant, setSelectedVariant] = useState<string>(\n    EXAMPLE_VARIANTS[0].value\n  );\n  const [quantity, setQuantity] = useState<number>(1);\n\n  // Adjust quantity if it exceeds available stock when variant changes\n  const handleVariantChange = (value: string) => {\n    setSelectedVariant(value);\n    const newVariant = EXAMPLE_VARIANTS.find((v) => v.value === value);\n    if (\n      newVariant &&\n      newVariant.isInStock &&\n      newVariant.availableQuantity !== undefined &&\n      newVariant.availableQuantity !== null &&\n      quantity > newVariant.availableQuantity\n    ) {\n      setQuantity(Math.max(1, newVariant.availableQuantity));\n    }\n  };\n\n  const handleAddToCart = (payload: VariantSelectionPayload) => {\n    const variant = EXAMPLE_VARIANTS.find((v) => v.value === payload.variantId);\n    const stockStatus = variant?.isInStock ? \"In Stock\" : \"Out of Stock\";\n    window.alert(\n      `Added ${payload.quantity} ${payload.variantLabel} to cart at $${payload.price} each.\\nStock Status: ${stockStatus}`\n    );\n  };\n\n  const handleBuyNow = (payload: VariantSelectionPayload) => {\n    const variant = EXAMPLE_VARIANTS.find((v) => v.value === payload.variantId);\n    const stockStatus = variant?.isInStock ? \"In Stock\" : \"Out of Stock\";\n    window.alert(\n      `Buying ${payload.quantity} ${payload.variantLabel} at $${payload.price} each.\\nStock Status: ${stockStatus}`\n    );\n  };\n\n  return (\n    <div className=\"container mx-auto p-4\">\n      <ProductVariant_01\n        title=\"Premium Noise-Cancelling Headphones\"\n        description=\"Experience exceptional sound quality with our top-of-the-line noise-cancelling headphones, perfect for music lovers and professionals alike.\"\n        badge=\"Sale\"\n        variants={EXAMPLE_VARIANTS}\n        variantLabel=\"Color\"\n        shippingInfo=\"Free 2-day shipping\"\n        selectedVariant={selectedVariant}\n        onVariantChange={handleVariantChange}\n        quantity={quantity}\n        onQuantityChange={setQuantity}\n        onAddToCart={handleAddToCart}\n        onBuyNow={handleBuyNow}\n      />\n    </div>\n  );\n}\n",
      "path": "/components/commerce-ui/blocks/product-variants/product-variants-01-ex.tsx",
      "target": "components/commerce-ui/product-variants-01-ex.tsx"
    }
  ]
}