variant-selector-basic-ex-01

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_01() {
19  const [selectedVariant, setSelectedVariant] = React.useState("variant-m");
20 
21  return (
22    <div className="space-y-8">
23      <fieldset className="space-y-4">
24        <legend className="mb-2 text-sm font-medium">Select Size:</legend>
25        <VariantSelectorBasic
26          value={selectedVariant}
27          onValueChange={setSelectedVariant}
28          variants={variants}
29        />
30      </fieldset>
31 
32      <button
33        onClick={() => setSelectedVariant("variant-m")}
34        className="bg-primary text-primary-foreground hover:bg-primary/90 rounded-md px-4 py-2 text-sm font-medium"
35      >
36        Reset to Medium
37      </button>
38    </div>
39  );
40}