variant-selector-basic-ex-05

1"use client";
2 
3import * as React from "react";
4import VariantSelectorBasic, {
5  VariantItem,
6} from "@/components/commerce-ui/variant-selector-basic";
7 
8// Example material variants
9const materialVariants: VariantItem[] = [
10  { id: "material-cotton", label: "Cotton", value: "material-cotton" },
11  { id: "material-polyester", label: "Polyester", value: "material-polyester" },
12  { id: "material-blend", label: "Blend", value: "material-blend" },
13];
14 
15export default function VariantSelector_Basic_Ex_05() {
16  const [selectedMaterial, setSelectedMaterial] =
17    React.useState("material-cotton");
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          Pick your material
24        </h3>
25        <p className="text-sm text-gray-600 dark:text-gray-400">
26          Choose the material that best suits your needs.
27        </p>
28 
29        <div className="space-y-2">
30          <label className="mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">
31            Select Material:
32          </label>
33          <VariantSelectorBasic
34            value={selectedMaterial}
35            onValueChange={setSelectedMaterial}
36            variants={materialVariants}
37            itemClassName="bg-transparent border-dashed hover:border-solid hover:border-indigo-300 dark:hover:border-indigo-700 
38                          focus:ring-indigo-200 focus:ring-offset-1 focus:ring-opacity-60 dark:focus:ring-indigo-800 
39                          dark:focus:ring-opacity-40 focus:border-indigo-400 dark:focus:border-indigo-600
40                          data-[state=checked]:border-2 data-[state=checked]:border-solid data-[state=checked]:border-indigo-500 
41                          data-[state=checked]:bg-indigo-50 data-[state=checked]:text-indigo-700 
42                          dark:data-[state=checked]:bg-indigo-900/30 dark:data-[state=checked]:text-indigo-300 
43                          dark:data-[state=checked]:border-indigo-400 
44                          data-[state=checked]:shadow-[0_0_0_1px_rgba(79,70,229,0.2)] 
45                          dark:data-[state=checked]:shadow-[0_0_0_1px_rgba(99,102,241,0.3)]"
46            labelClassName="font-normal"
47          />
48        </div>
49      </div>
50    </div>
51  );
52}