{
  "name": "product-variant-03-block-ex",
  "type": "registry:example",
  "dependencies": [],
  "registryDependencies": [
    "https://ui.stackzero.co/r/product-variant-03-block.json"
  ],
  "files": [
    {
      "type": "registry:example",
      "content": "\"use client\";\n\n// Example usage of ProductVariant_03 component\n\nimport { useState } from \"react\";\nimport ProductVariant_03, {\n  VariantItem,\n  VariantSelectionPayload,\n} from \"@/components/commerce-ui/product-variants-03\";\n\nconst EXAMPLE_VARIANTS: VariantItem[] = [\n  {\n    availableQuantity: 32,\n    features: [\n      \"360° Immersive Sound\",\n      \"Waterproof Design\",\n      \"10-hour Battery Life\",\n      \"Bluetooth 5.0\",\n    ],\n    id: \"model-standard\",\n    images: [\n      {\n        title: \"Standard Speaker\",\n        url: \"https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/speaker-02.jpg\",\n      },\n      {\n        title: \"Standard Speaker\",\n        url: \"https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/speaker-02.jpg\",\n      },\n    ],\n    isInStock: true,\n    label: \"Standard\",\n    price: 199.99,\n    value: \"model-standard\",\n  },\n  {\n    availableQuantity: 15,\n    features: [\n      \"360° Immersive Sound\",\n      \"Waterproof Design\",\n      \"15-hour Battery Life\",\n      \"Bluetooth 5.1\",\n      \"Voice Assistant\",\n    ],\n    id: \"model-pro\",\n    images: [\n      {\n        title: \"Pro Speaker\",\n        url: \"https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/speaker-03.jpg\",\n      },\n      {\n        title: \"Pro Speaker\",\n        url: \"https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/speaker-03.jpg\",\n      },\n    ],\n    isInStock: true,\n    label: \"Pro\",\n    price: 249.99,\n    salePrice: 229.99,\n    value: \"model-pro\",\n  },\n  {\n    availableQuantity: 8,\n    features: [\n      \"360° Immersive Sound\",\n      \"Waterproof Design\",\n      \"20-hour Battery Life\",\n      \"Bluetooth 5.2\",\n      \"Voice Assistant\",\n      \"Multi-room Sync\",\n    ],\n    id: \"model-ultra\",\n    images: [\n      {\n        title: \"Ultra Speaker\",\n        url: \"https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/speaker-04.jpg\",\n      },\n      {\n        title: \"Ultra Speaker\",\n        url: \"https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/speaker-04.jpg\",\n      },\n    ],\n    isInStock: true,\n    label: \"Ultra\",\n    price: 299.99,\n    value: \"model-ultra\",\n  },\n  {\n    availableQuantity: 0,\n    features: [\n      \"360° Immersive Sound\",\n      \"Waterproof Design\",\n      \"24-hour Battery Life\",\n      \"Bluetooth 5.2\",\n      \"Voice Assistant\",\n      \"Multi-room Sync\",\n      \"Exclusive Design\",\n    ],\n    id: \"model-limited\",\n    images: [\n      {\n        title: \"Limited Edition Speaker\",\n        url: \"https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/speaker-01.jpg\",\n      },\n      {\n        title: \"Limited Edition Speaker\",\n        url: \"https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/speaker-01.jpg\",\n      },\n      {\n        title: \"Limited Edition Speaker\",\n        url: \"https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/speaker-01.jpg\",\n      },\n    ],\n    isInStock: false,\n    label: \"Limited Edition\",\n    price: 349.99,\n    value: \"model-limited\",\n  },\n];\n\nexport default function ProductVariant03Example() {\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} SoundSphere to cart for a total of $${payload.totalPrice.toFixed(2)}.\\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} SoundSphere for a total of $${payload.totalPrice.toFixed(2)}.\\nStock Status: ${stockStatus}`\n    );\n  };\n\n  return (\n    <div className=\"container mx-auto p-4\">\n      <ProductVariant_03\n        title=\"SoundSphere Ultra Wireless Speaker\"\n        description=\"Next-generation portable speaker with 360° spatial audio and immersive sound experience. Perfect for home, travel, and outdoor adventures.\"\n        badge=\"Just Released\"\n        variants={EXAMPLE_VARIANTS}\n        selectedVariant={selectedVariant}\n        onVariantChange={handleVariantChange}\n        quantity={quantity}\n        onQuantityChange={setQuantity}\n        onAddToCart={handleAddToCart}\n        onBuyNow={handleBuyNow}\n        releaseDate=\"August 15, 2023\"\n        currencyPrefix=\"$\"\n      />\n    </div>\n  );\n}\n",
      "path": "/components/commerce-ui/blocks/product-variants/product-variants-03-ex.tsx",
      "target": "components/commerce-ui/product-variants-03-ex.tsx"
    }
  ]
}