product-variant-05-block-ex

1"use client";
2 
3// Example usage of ProductVariant_05 component
4 
5import { useState } from "react";
6import ProductVariant_05, {
7  AccessoryVariant,
8  ServiceVariant,
9  VariantSelectionPayload,
10} from "@/components/commerce-ui/product-variants-05";
11 
12// Example accessory variants
13const EXAMPLE_ACCESSORY_VARIANTS: AccessoryVariant[] = [
14  {
15    availableQuantity: 15,
16    id: "acc-pitcher",
17    isInStock: true,
18    label: "Milk Pitcher",
19    price: 24.99,
20    value: "acc-pitcher",
21  },
22  {
23    availableQuantity: 32,
24    id: "acc-descaler",
25    isInStock: true,
26    label: "Descaling Kit",
27    price: 19.99,
28    value: "acc-descaler",
29  },
30  {
31    availableQuantity: 8,
32    id: "acc-filter",
33    isInStock: true,
34    label: "Water Filter Pack",
35    price: 29.99,
36    value: "acc-filter",
37  },
38  {
39    availableQuantity: 0,
40    id: "acc-cups",
41    isInStock: false,
42    label: "Espresso Cup Set",
43    price: 39.99,
44    value: "acc-cups",
45  },
46  {
47    availableQuantity: 5,
48    id: "acc-tamper",
49    isInStock: true,
50    label: "Premium Tamper",
51    price: 44.99,
52    value: "acc-tamper",
53  },
54];
55 
56// Example service variants
57const EXAMPLE_SERVICE_VARIANTS: ServiceVariant[] = [
58  {
59    id: "serv-extended",
60    label: "Extended Warranty (+2 Years)",
61    price: 99.99,
62    value: "serv-extended",
63  },
64  {
65    id: "serv-installation",
66    label: "Professional Installation",
67    price: 79.99,
68    value: "serv-installation",
69  },
70  {
71    id: "serv-maintenance",
72    label: "Annual Maintenance Plan",
73    price: 149.99,
74    value: "serv-maintenance",
75  },
76];
77 
78// Example product images
79const EXAMPLE_PRODUCT_IMAGES = [
80  {
81    title: "Coffee Machine Front View",
82    url: "https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/coffee-machine-01.jpg",
83  },
84  {
85    title: "Coffee Machine Side View",
86    url: "https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/coffee-machine-02.jpg",
87  },
88  {
89    title: "Coffee Machine Cups",
90    url: "https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/coffee-cups-01.jpg",
91  },
92  {
93    title: "Coffee Filters",
94    url: "https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/coffee-filter-01.jpg",
95  },
96];
97 
98export default function ProductVariant05Example() {
99  const [selectedAccessories, setSelectedAccessories] = useState<string[]>([
100    "acc-descaler",
101    "acc-filter",
102  ]);
103// … truncated