variant-selector-basic-ex-03

1"use client";
2 
3import * as React from "react";
4import VariantSelectorBasic, {
5  VariantItem,
6} from "@/components/commerce-ui/variant-selector-basic";
7 
8// Example model variants
9const modelVariants: VariantItem[] = [
10  { id: "model-light", label: "Light", value: "model-light" },
11  { id: "model-medium", label: "Medium", value: "model-medium" },
12  { id: "model-large", label: "Large", value: "model-large" },
13  { id: "model-ultra", label: "Ultra", value: "model-ultra" },
14];
15 
16export default function VariantSelector_Basic_Ex_03() {
17  const [selectedModel, setSelectedModel] = React.useState("model-light");
18 
19  return (
20    <div className="space-y-8">
21      <div className="space-y-4 rounded-lg border border-gray-200 bg-white p-6 dark:border-gray-800 dark:bg-gray-900">
22        <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
23          Choose your model
24        </h3>
25        <p className="text-sm text-gray-600 dark:text-gray-400">
26          Select the model you want to purchase.
27        </p>
28 
29        <div className="space-y-2">
30          <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
31            Select Color:
32          </label>
33          <VariantSelectorBasic
34            value={selectedModel}
35            onValueChange={setSelectedModel}
36            variants={modelVariants}
37            itemClassName="bg-gray-50 border-gray-200 hover:border-teal-300 dark:bg-gray-800 dark:border-gray-700
38                         data-[state=checked]:border-teal-500 data-[state=checked]:bg-gradient-to-r 
39                         data-[state=checked]:from-teal-50 data-[state=checked]:to-cyan-50 
40                         data-[state=checked]:text-teal-700 dark:data-[state=checked]:bg-gradient-to-r 
41                         dark:data-[state=checked]:from-teal-900/40 dark:data-[state=checked]:to-cyan-900/40 
42                         dark:data-[state=checked]:border-teal-500 dark:data-[state=checked]:text-teal-300
43                         focus:ring-2 focus:ring-teal-500/50 focus:ring-offset-2 focus:border-teal-400
44                         dark:focus:ring-teal-500/40 dark:focus:ring-offset-gray-900"
45          />
46        </div>
47      </div>
48    </div>
49  );
50}