variant-selector-basic-ex-04

1"use client";
2 
3import * as React from "react";
4import VariantSelectorBasic, {
5  VariantItem,
6} from "@/components/commerce-ui/variant-selector-basic";
7 
8// Example size variants
9const sizeVariants: VariantItem[] = [
10  { id: "size-xs", label: "XS", value: "size-xs" },
11  { id: "size-s", label: "S", value: "size-s" },
12  { id: "size-m", label: "M", value: "size-m" },
13  { id: "size-l", label: "L", value: "size-l" },
14  { id: "size-xl", label: "XL", value: "size-xl" },
15];
16 
17export default function VariantSelector_Basic_Ex_04() {
18  const [selectedSize, setSelectedSize] = React.useState("size-m");
19 
20  return (
21    <div className="space-y-8">
22      <div className="space-y-4 rounded-lg border border-gray-200 bg-white p-6 dark:border-gray-800 dark:bg-gray-900">
23        <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
24          Pill Style
25        </h3>
26        <p className="text-sm text-gray-600 dark:text-gray-400">
27          Rounded pill-shaped variant buttons with custom active state using
28          data-state
29        </p>
30 
31        <div className="space-y-2">
32          <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
33            Select Size:
34          </label>
35          <VariantSelectorBasic
36            value={selectedSize}
37            onValueChange={setSelectedSize}
38            variants={sizeVariants}
39            className="gap-2"
40            itemClassName="rounded-full min-w-[60px] bg-transparent hover:bg-gray-100 dark:hover:bg-gray-800
41                        data-[state=checked]:bg-gray-900 data-[state=checked]:border-gray-900 data-[state=checked]:text-white 
42                        dark:data-[state=checked]:bg-white dark:data-[state=checked]:border-white dark:data-[state=checked]:text-gray-900"
43          />
44        </div>
45      </div>
46    </div>
47  );
48}