{
  "name": "product-variant-05-block-ex",
  "type": "registry:example",
  "dependencies": [],
  "registryDependencies": [
    "https://ui.stackzero.co/r/product-variant-05-block.json"
  ],
  "files": [
    {
      "type": "registry:example",
      "content": "\"use client\";\n\n// Example usage of ProductVariant_05 component\n\nimport { useState } from \"react\";\nimport ProductVariant_05, {\n  AccessoryVariant,\n  ServiceVariant,\n  VariantSelectionPayload,\n} from \"@/components/commerce-ui/product-variants-05\";\n\n// Example accessory variants\nconst EXAMPLE_ACCESSORY_VARIANTS: AccessoryVariant[] = [\n  {\n    availableQuantity: 15,\n    id: \"acc-pitcher\",\n    isInStock: true,\n    label: \"Milk Pitcher\",\n    price: 24.99,\n    value: \"acc-pitcher\",\n  },\n  {\n    availableQuantity: 32,\n    id: \"acc-descaler\",\n    isInStock: true,\n    label: \"Descaling Kit\",\n    price: 19.99,\n    value: \"acc-descaler\",\n  },\n  {\n    availableQuantity: 8,\n    id: \"acc-filter\",\n    isInStock: true,\n    label: \"Water Filter Pack\",\n    price: 29.99,\n    value: \"acc-filter\",\n  },\n  {\n    availableQuantity: 0,\n    id: \"acc-cups\",\n    isInStock: false,\n    label: \"Espresso Cup Set\",\n    price: 39.99,\n    value: \"acc-cups\",\n  },\n  {\n    availableQuantity: 5,\n    id: \"acc-tamper\",\n    isInStock: true,\n    label: \"Premium Tamper\",\n    price: 44.99,\n    value: \"acc-tamper\",\n  },\n];\n\n// Example service variants\nconst EXAMPLE_SERVICE_VARIANTS: ServiceVariant[] = [\n  {\n    id: \"serv-extended\",\n    label: \"Extended Warranty (+2 Years)\",\n    price: 99.99,\n    value: \"serv-extended\",\n  },\n  {\n    id: \"serv-installation\",\n    label: \"Professional Installation\",\n    price: 79.99,\n    value: \"serv-installation\",\n  },\n  {\n    id: \"serv-maintenance\",\n    label: \"Annual Maintenance Plan\",\n    price: 149.99,\n    value: \"serv-maintenance\",\n  },\n];\n\n// Example product images\nconst EXAMPLE_PRODUCT_IMAGES = [\n  {\n    title: \"Coffee Machine Front View\",\n    url: \"https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/coffee-machine-01.jpg\",\n  },\n  {\n    title: \"Coffee Machine Side View\",\n    url: \"https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/coffee-machine-02.jpg\",\n  },\n  {\n    title: \"Coffee Machine Cups\",\n    url: \"https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/coffee-cups-01.jpg\",\n  },\n  {\n    title: \"Coffee Filters\",\n    url: \"https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/coffee-filter-01.jpg\",\n  },\n];\n\nexport default function ProductVariant05Example() {\n  const [selectedAccessories, setSelectedAccessories] = useState<string[]>([\n    \"acc-descaler\",\n    \"acc-filter\",\n  ]);\n  const [selectedServices, setSelectedServices] = useState<string[]>([\n    \"serv-extended\",\n  ]);\n  const [quantity, setQuantity] = useState<number>(1);\n\n  const handleAddToCart = (payload: VariantSelectionPayload) => {\n    // Format the accessories and services for the alert message\n    const accessoriesMessage =\n      payload.accessoryIds.length > 0\n        ? `\\nSelected Accessories: ${payload.accessoryLabels.join(\", \")} for $${payload.accessoriesPrice.toFixed(2)}`\n        : \"\\nNo accessories selected\";\n\n    const servicesMessage =\n      payload.serviceIds.length > 0\n        ? `\\nSelected Services: ${payload.serviceLabels.join(\", \")} for $${payload.servicesPrice.toFixed(2)}`\n        : \"\\nNo services selected\";\n\n    window.alert(\n      `Added ${payload.quantity} BrewMaster Pro Coffee Machine to cart for a total of $${payload.totalPrice.toFixed(2)}\nBase Price: $${payload.productPrice.toFixed(2)}${accessoriesMessage}${servicesMessage}`\n    );\n  };\n\n  const handleBuyNow = (payload: VariantSelectionPayload) => {\n    // Format the accessories and services for the alert message\n    const accessoriesMessage =\n      payload.accessoryIds.length > 0\n        ? `\\nSelected Accessories: ${payload.accessoryLabels.join(\", \")} for $${payload.accessoriesPrice.toFixed(2)}`\n        : \"\\nNo accessories selected\";\n\n    const servicesMessage =\n      payload.serviceIds.length > 0\n        ? `\\nSelected Services: ${payload.serviceLabels.join(\", \")} for $${payload.servicesPrice.toFixed(2)}`\n        : \"\\nNo services selected\";\n\n    window.alert(\n      `Buying ${payload.quantity} BrewMaster Pro Coffee Machine for a total of $${payload.totalPrice.toFixed(2)}\nBase Price: $${payload.productPrice.toFixed(2)}${accessoriesMessage}${servicesMessage}`\n    );\n  };\n\n  return (\n    <div className=\"container mx-auto p-4\">\n      <ProductVariant_05\n        title=\"BrewMaster Pro Coffee Machine\"\n        description=\"Professional-grade espresso machine with 15-bar pressure, built-in grinder and milk frother for café-quality coffee at home. Features programmable settings and a compact design.\"\n        price={399.99}\n        badge=\"Barista Choice\"\n        rating={4.8}\n        reviewCount={256}\n        warranty=\"2 Year\"\n        images={EXAMPLE_PRODUCT_IMAGES}\n        accessoryVariants={EXAMPLE_ACCESSORY_VARIANTS}\n        serviceVariants={EXAMPLE_SERVICE_VARIANTS}\n        selectedAccessories={selectedAccessories}\n        onAccessoriesChange={setSelectedAccessories}\n        selectedServices={selectedServices}\n        onServicesChange={setSelectedServices}\n        quantity={quantity}\n        onQuantityChange={setQuantity}\n        onAddToCart={handleAddToCart}\n        onBuyNow={handleBuyNow}\n        currencyPrefix=\"$\"\n        benefits={[\n          {\n            description: \"Ready in under 30 seconds\",\n            icon: (\n              <svg\n                className=\"h-6 w-6\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                viewBox=\"0 0 24 24\"\n              >\n                <path\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  strokeWidth={2}\n                  d=\"M13 10V3L4 14h7v7l9-11h-7z\"\n                />\n              </svg>\n            ),\n            title: \"Fast Brewing\",\n          },\n          {\n            description: \"Self-cleaning function\",\n            icon: (\n              <svg\n                className=\"h-6 w-6\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                viewBox=\"0 0 24 24\"\n              >\n                <path\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  strokeWidth={2}\n                  d=\"M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z\"\n                />\n              </svg>\n            ),\n            title: \"Easy Cleaning\",\n          },\n          {\n            description: \"Multiple brewing options\",\n            icon: (\n              <svg\n                className=\"h-6 w-6\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                viewBox=\"0 0 24 24\"\n              >\n                <path\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  strokeWidth={2}\n                  d=\"M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z\"\n                />\n              </svg>\n            ),\n            title: \"Customizable\",\n          },\n        ]}\n        featuredReview={{\n          avatarUrl:\n            \"https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/user-04.jpg\",\n          rating: 5,\n          reviewDate: \"Mar 15, 2024\",\n          reviewerName: \"Sarah Johnson\",\n          reviewerTitle: \"Coffee Enthusiast\",\n          reviewText:\n            \"This espresso machine changed my mornings completely. The milk frother creates the perfect foam for my lattes and the coffee quality is indistinguishable from my local café.\",\n        }}\n      />\n    </div>\n  );\n}\n",
      "path": "/components/commerce-ui/blocks/product-variants/product-variants-05-ex.tsx",
      "target": "components/commerce-ui/product-variants-05-ex.tsx"
    }
  ]
}