variant-selector-multiple-ex-01

1"use client";
2 
3import * as React from "react";
4import VariantSelectorMultiple, {
5  VariantItem,
6} from "@/components/commerce-ui/variant-selector-multiple";
7 
8const variants: VariantItem[] = [
9  {
10    id: "damage-protection",
11    label: "Damage Protection",
12    value: "damage-protection",
13  },
14  {
15    id: "extended-warranty",
16    label: "Extended Warranty",
17    value: "extended-warranty",
18  },
19  {
20    id: "theft-protection",
21    label: "Theft Protection",
22    value: "theft-protection",
23  },
24];
25 
26export default function VariantSelector_Basic_Ex_01() {
27  const [selectedVariant, setSelectedVariant] = React.useState<string[]>([
28    "extended-warranty",
29  ]);
30 
31  return (
32    <div className="space-y-8">
33      <fieldset className="space-y-4">
34        <legend className="mb-2 text-sm font-medium">Select Size:</legend>
35        <VariantSelectorMultiple
36          values={selectedVariant}
37          onValuesChange={setSelectedVariant}
38          variants={variants}
39        />
40      </fieldset>
41    </div>
42  );
43}