variant-selector-basic-ex-02

1"use client";
2 
3import * as React from "react";
4import VariantSelectorBasic, {
5  VariantItem,
6} from "@/components/commerce-ui/variant-selector-basic";
7 
8const variants: VariantItem[] = [
9  { id: "variant-xxs", label: "XXS", value: "variant-xxs" },
10  { id: "variant-xs", label: "XS", value: "variant-xs" },
11  { id: "variant-s", label: "S", value: "variant-s" },
12  { id: "variant-m", label: "M", value: "variant-m" },
13  { id: "variant-l", label: "L", value: "variant-l" },
14  { id: "variant-xl", label: "XL", value: "variant-xl" },
15  { id: "variant-xxl", label: "XXL", value: "variant-xxl" },
16];
17 
18export default function VariantSelector_Basic_Ex_02() {
19  const [selectedVariant1, setSelectedVariant1] = React.useState("variant-m");
20  const [selectedVariant2, setSelectedVariant2] = React.useState("variant-m");
21 
22  return (
23    <div className="flex items-center gap-6 space-y-8">
24      <fieldset className="max-w-sm">
25        <legend className="mb-2 text-sm font-medium">Select Size:</legend>
26        <VariantSelectorBasic
27          value={selectedVariant1}
28          onValueChange={setSelectedVariant1}
29          variants={variants}
30          className="max-w-[100px] grid-cols-1 sm:grid-cols-1"
31        />
32      </fieldset>
33      <fieldset className="max-w-sm">
34        <legend className="mb-2 text-sm font-medium">Select Size:</legend>
35        <VariantSelectorBasic
36          value={selectedVariant2}
37          onValueChange={setSelectedVariant2}
38          variants={variants}
39          className="grid-cols-7 sm:grid-cols-7"
40        />
41      </fieldset>
42    </div>
43  );
44}