variant-selector-multiple-ex-02

1"use client";
2 
3import * as React from "react";
4import { Check } from "lucide-react";
5import VariantSelectorMultiple, {
6  VariantItem,
7} from "@/components/commerce-ui/variant-selector-multiple";
8 
9const deliveryOptions: VariantItem[] = [
10  {
11    id: "standard",
12    label: "Standard Delivery (3-5 days)",
13    value: "standard",
14  },
15  {
16    id: "express",
17    label: "Express Delivery (1-2 days)",
18    value: "express",
19  },
20  {
21    id: "same-day",
22    label: "Same Day Delivery",
23    value: "same-day",
24  },
25  {
26    id: "pickup",
27    label: "In-Store Pickup",
28    value: "pickup",
29  },
30];
31 
32export default function VariantSelector_Multiple_Ex_02() {
33  const [selectedOptions, setSelectedOptions] = React.useState<string[]>([
34    "standard",
35  ]);
36 
37  return (
38    <div className="space-y-8">
39      <div className="space-y-4 rounded-lg border border-gray-200 bg-white p-6 dark:border-gray-800 dark:bg-gray-900">
40        <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
41          Delivery Options
42        </h3>
43        <p className="text-sm text-gray-600 dark:text-gray-400">
44          Select your preferred delivery methods. You can choose multiple
45          options.
46        </p>
47 
48        <div className="space-y-2">
49          <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
50            Available Options:
51          </label>
52          <VariantSelectorMultiple
53            values={selectedOptions}
54            onValuesChange={setSelectedOptions}
55            variants={deliveryOptions}
56            className="grid grid-cols-1 gap-3 sm:grid-cols-2"
57            itemClassName="relative bg-white border-2 border-gray-200 rounded-lg hover:border-purple-300 
58                         data-[state=on]:border-purple-600 data-[state=on]:bg-purple-50
59                         dark:bg-gray-900 dark:border-gray-700 dark:data-[state=on]:bg-purple-900/20
60                         dark:data-[state=on]:border-purple-500 dark:hover:border-purple-400
61                         focus:outline-none focus:ring-2 focus:ring-purple-500/50 focus:ring-offset-2
62                         dark:focus:ring-purple-500/40 dark:focus:ring-offset-gray-900
63                         h-auto py-4 px-4 text-left flex items-center justify-between"
64            labelClassName="text-sm"
65          />
66        </div>
67 
68        <div className="mt-4 min-h-[200px] rounded-lg bg-gray-50 p-4 dark:bg-gray-800">
69          <p className="font-medium text-gray-900 dark:text-gray-100">
70// … truncated