product-variant-03-block-ex

1"use client";
2 
3// Example usage of ProductVariant_03 component
4 
5import { useState } from "react";
6import ProductVariant_03, {
7  VariantItem,
8  VariantSelectionPayload,
9} from "@/components/commerce-ui/product-variants-03";
10 
11const EXAMPLE_VARIANTS: VariantItem[] = [
12  {
13    availableQuantity: 32,
14    features: [
15      "360° Immersive Sound",
16      "Waterproof Design",
17      "10-hour Battery Life",
18      "Bluetooth 5.0",
19    ],
20    id: "model-standard",
21    images: [
22      {
23        title: "Standard Speaker",
24        url: "https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/speaker-02.jpg",
25      },
26      {
27        title: "Standard Speaker",
28        url: "https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/speaker-02.jpg",
29      },
30    ],
31    isInStock: true,
32    label: "Standard",
33    price: 199.99,
34    value: "model-standard",
35  },
36  {
37    availableQuantity: 15,
38    features: [
39      "360° Immersive Sound",
40      "Waterproof Design",
41      "15-hour Battery Life",
42      "Bluetooth 5.1",
43      "Voice Assistant",
44    ],
45    id: "model-pro",
46    images: [
47      {
48        title: "Pro Speaker",
49        url: "https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/speaker-03.jpg",
50      },
51      {
52        title: "Pro Speaker",
53        url: "https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/speaker-03.jpg",
54      },
55    ],
56    isInStock: true,
57    label: "Pro",
58    price: 249.99,
59    salePrice: 229.99,
60    value: "model-pro",
61  },
62  {
63    availableQuantity: 8,
64    features: [
65      "360° Immersive Sound",
66      "Waterproof Design",
67      "20-hour Battery Life",
68      "Bluetooth 5.2",
69      "Voice Assistant",
70      "Multi-room Sync",
71    ],
72    id: "model-ultra",
73    images: [
74      {
75        title: "Ultra Speaker",
76        url: "https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/speaker-04.jpg",
77      },
78      {
79        title: "Ultra Speaker",
80        url: "https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/speaker-04.jpg",
81      },
82    ],
83    isInStock: true,
84    label: "Ultra",
85    price: 299.99,
86    value: "model-ultra",
87  },
88  {
89    availableQuantity: 0,
90    features: [
91      "360° Immersive Sound",
92      "Waterproof Design",
93      "24-hour Battery Life",
94      "Bluetooth 5.2",
95      "Voice Assistant",
96      "Multi-room Sync",
97// … truncated