{
  "name": "product-variant-04-block-ex",
  "type": "registry:example",
  "dependencies": [],
  "registryDependencies": [
    "https://ui.stackzero.co/r/product-variant-04-block.json"
  ],
  "files": [
    {
      "type": "registry:example",
      "content": "\"use client\";\n\n// Example usage of ProductVariant_04 component\n\nimport { useState } from \"react\";\nimport ProductVariant_04, {\n  AccessoryVariant,\n  StorageVariant,\n  Testimonial,\n  VariantSelectionPayload,\n} from \"@/components/commerce-ui/product-variants-04\";\n\n// Storage variants with prices and stock information\nconst EXAMPLE_STORAGE_VARIANTS: StorageVariant[] = [\n  {\n    availableQuantity: 15,\n    id: \"storage-64\",\n    isInStock: true,\n    label: \"64GB\",\n    price: 1299.99,\n    value: \"storage-64\",\n  },\n  {\n    availableQuantity: 8,\n    id: \"storage-128\",\n    isInStock: true,\n    label: \"128GB\",\n    price: 1399.99,\n    value: \"storage-128\",\n  },\n  {\n    availableQuantity: 3,\n    id: \"storage-256\",\n    isInStock: true,\n    label: \"256GB\",\n    price: 1499.99,\n    value: \"storage-256\",\n  },\n  {\n    availableQuantity: 0,\n    id: \"storage-512\",\n    isInStock: false,\n    label: \"512GB\",\n    price: 1699.99,\n    value: \"storage-512\",\n  },\n];\n\n// Accessory options with prices\nconst EXAMPLE_ACCESSORY_VARIANTS: AccessoryVariant[] = [\n  {\n    id: \"acc-sd\",\n    label: \"SD Card (64GB)\",\n    price: 29.99,\n    value: \"acc-sd\",\n  },\n  {\n    id: \"acc-tripod\",\n    label: \"Mini Tripod\",\n    price: 49.99,\n    value: \"acc-tripod\",\n  },\n  {\n    id: \"acc-bag\",\n    label: \"Camera Bag\",\n    price: 79.99,\n    value: \"acc-bag\",\n  },\n  {\n    id: \"acc-lens\",\n    label: \"Extra Lens\",\n    price: 249.99,\n    value: \"acc-lens\",\n  },\n  {\n    id: \"acc-batt\",\n    label: \"Battery Pack\",\n    price: 59.99,\n    value: \"acc-batt\",\n  },\n];\n\n// Example testimonials\nconst EXAMPLE_TESTIMONIALS: Testimonial[] = [\n  {\n    date: \"3 weeks ago\",\n    name: \"Michael Roberts\",\n    rating: 5,\n    role: \"Professional Photographer\",\n    text: \"The image quality is exceptional. I've switched from my DSLR and haven't looked back.\",\n  },\n  {\n    date: \"1 month ago\",\n    name: \"Sarah Chen\",\n    rating: 4,\n    role: \"Content Creator\",\n    text: \"Perfect for my YouTube videos. The autofocus is lightning fast!\",\n  },\n  {\n    date: \"2 months ago\",\n    name: \"Alex Johnson\",\n    rating: 5,\n    text: \"Worth every penny. The low light performance is incredible.\",\n  },\n];\n\nexport default function ProductVariant04Example() {\n  const [selectedStorage, setSelectedStorage] = useState<string>(\n    EXAMPLE_STORAGE_VARIANTS[0].value\n  );\n  const [selectedAccessories, setSelectedAccessories] = useState<string[]>([\n    \"acc-sd\",\n    \"acc-tripod\",\n  ]);\n  const [quantity, setQuantity] = useState<number>(1);\n\n  // Adjust quantity if it exceeds available stock when storage changes\n  const handleStorageChange = (value: string) => {\n    setSelectedStorage(value);\n    const newStorageVariant = EXAMPLE_STORAGE_VARIANTS.find(\n      (v) => v.value === value\n    );\n    if (\n      newStorageVariant &&\n      newStorageVariant.isInStock &&\n      newStorageVariant.availableQuantity !== undefined &&\n      newStorageVariant.availableQuantity !== null &&\n      quantity > newStorageVariant.availableQuantity\n    ) {\n      setQuantity(Math.max(1, newStorageVariant.availableQuantity));\n    }\n  };\n\n  const handleAddToCart = (payload: VariantSelectionPayload) => {\n    const storageVariant = EXAMPLE_STORAGE_VARIANTS.find(\n      (v) => v.value === payload.storageVariantId\n    );\n    const stockStatus = storageVariant?.isInStock ? \"In Stock\" : \"Out of Stock\";\n\n    const accessoryLabels = payload.accessoryLabels.join(\", \");\n    const accessoriesMessage =\n      payload.accessoryIds.length > 0\n        ? `\\nSelected Accessories: ${accessoryLabels} for $${payload.accessoriesPrice.toFixed(2)}`\n        : \"\\nNo accessories selected\";\n\n    window.alert(\n      `Added ${payload.quantity} ${payload.storageVariantLabel} ProCapture X3 to cart for a total of $${payload.totalPrice.toFixed(2)}\nStorage Price: $${payload.storagePrice.toFixed(2)}${accessoriesMessage}\nStock Status: ${stockStatus}`\n    );\n  };\n\n  const handleBuyNow = (payload: VariantSelectionPayload) => {\n    const storageVariant = EXAMPLE_STORAGE_VARIANTS.find(\n      (v) => v.value === payload.storageVariantId\n    );\n    const stockStatus = storageVariant?.isInStock ? \"In Stock\" : \"Out of Stock\";\n\n    const accessoryLabels = payload.accessoryLabels.join(\", \");\n    const accessoriesMessage =\n      payload.accessoryIds.length > 0\n        ? `\\nSelected Accessories: ${accessoryLabels} for $${payload.accessoriesPrice.toFixed(2)}`\n        : \"\\nNo accessories selected\";\n\n    window.alert(\n      `Buying ${payload.quantity} ${payload.storageVariantLabel} ProCapture X3 for a total of $${payload.totalPrice.toFixed(2)}\nStorage Price: $${payload.storagePrice.toFixed(2)}${accessoriesMessage}\nStock Status: ${stockStatus}`\n    );\n  };\n\n  return (\n    <div className=\"container mx-auto p-4\">\n      <ProductVariant_04\n        title=\"ProCapture X3 Digital Camera\"\n        description=\"Professional-grade mirrorless camera with 32MP sensor, 4K video recording, and advanced stabilization. Perfect for professionals and enthusiasts alike.\"\n        badge=\"New Release\"\n        imageUrl=\"https://images.pexels.com/photos/6883802/pexels-photo-6883802.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\"\n        features={[\n          \"32 Megapixel Sensor\",\n          \"4K Video Recording\",\n          \"5-Axis Stabilization\",\n          \"Weather-Sealed Body\",\n          \"Bluetooth & Wi-Fi\",\n          \"1200+ Shots Per Charge\",\n        ]}\n        storageVariants={EXAMPLE_STORAGE_VARIANTS}\n        accessoryVariants={EXAMPLE_ACCESSORY_VARIANTS}\n        testimonials={EXAMPLE_TESTIMONIALS}\n        selectedStorage={selectedStorage}\n        onStorageChange={handleStorageChange}\n        selectedAccessories={selectedAccessories}\n        onAccessoriesChange={setSelectedAccessories}\n        quantity={quantity}\n        onQuantityChange={setQuantity}\n        onAddToCart={handleAddToCart}\n        onBuyNow={handleBuyNow}\n        currencyPrefix=\"$\"\n      />\n    </div>\n  );\n}\n",
      "path": "/components/commerce-ui/blocks/product-variants/product-variants-04-ex.tsx",
      "target": "components/commerce-ui/product-variants-04-ex.tsx"
    }
  ]
}