product-variant-04-block-ex

1"use client";
2 
3// Example usage of ProductVariant_04 component
4 
5import { useState } from "react";
6import ProductVariant_04, {
7  AccessoryVariant,
8  StorageVariant,
9  Testimonial,
10  VariantSelectionPayload,
11} from "@/components/commerce-ui/product-variants-04";
12 
13// Storage variants with prices and stock information
14const EXAMPLE_STORAGE_VARIANTS: StorageVariant[] = [
15  {
16    availableQuantity: 15,
17    id: "storage-64",
18    isInStock: true,
19    label: "64GB",
20    price: 1299.99,
21    value: "storage-64",
22  },
23  {
24    availableQuantity: 8,
25    id: "storage-128",
26    isInStock: true,
27    label: "128GB",
28    price: 1399.99,
29    value: "storage-128",
30  },
31  {
32    availableQuantity: 3,
33    id: "storage-256",
34    isInStock: true,
35    label: "256GB",
36    price: 1499.99,
37    value: "storage-256",
38  },
39  {
40    availableQuantity: 0,
41    id: "storage-512",
42    isInStock: false,
43    label: "512GB",
44    price: 1699.99,
45    value: "storage-512",
46  },
47];
48 
49// Accessory options with prices
50const EXAMPLE_ACCESSORY_VARIANTS: AccessoryVariant[] = [
51  {
52    id: "acc-sd",
53    label: "SD Card (64GB)",
54    price: 29.99,
55    value: "acc-sd",
56  },
57  {
58    id: "acc-tripod",
59    label: "Mini Tripod",
60    price: 49.99,
61    value: "acc-tripod",
62  },
63  {
64    id: "acc-bag",
65    label: "Camera Bag",
66    price: 79.99,
67    value: "acc-bag",
68  },
69  {
70    id: "acc-lens",
71    label: "Extra Lens",
72    price: 249.99,
73    value: "acc-lens",
74  },
75  {
76    id: "acc-batt",
77    label: "Battery Pack",
78    price: 59.99,
79    value: "acc-batt",
80  },
81];
82 
83// Example testimonials
84const EXAMPLE_TESTIMONIALS: Testimonial[] = [
85  {
86    date: "3 weeks ago",
87    name: "Michael Roberts",
88    rating: 5,
89    role: "Professional Photographer",
90    text: "The image quality is exceptional. I've switched from my DSLR and haven't looked back.",
91  },
92  {
93    date: "1 month ago",
94    name: "Sarah Chen",
95    rating: 4,
96    role: "Content Creator",
97    text: "Perfect for my YouTube videos. The autofocus is lightning fast!",
98  },
99  {
100    date: "2 months ago",
101    name: "Alex Johnson",
102    rating: 5,
103    text: "Worth every penny. The low light performance is incredible.",
104  },
105];
106 
107export default function ProductVariant04Example() {
108  const [selectedStorage, setSelectedStorage] = useState<string>(
109    EXAMPLE_STORAGE_VARIANTS[0].value
110  );
111  const [selectedAccessories, setSelectedAccessories] = useState<string[]>([
112    "acc-sd",
113    "acc-tripod",
114  ]);
115  const [quantity, setQuantity] = useState<number>(1);
116 
117// … truncated