variant-selector-multiple

1"use client";
2 
3import * as React from "react";
4import { ToggleGroup, ToggleGroupItem } from "@radix-ui/react-toggle-group";
5 
6import { cn } from "@/lib/utils";
7 
8export interface VariantItem {
9  id: string;
10  value: string;
11  label: string;
12  disabled?: boolean;
13}
14 
15interface VariantSelectorMultipleProps {
16  values: string[];
17  onValuesChange: (values: string[]) => void;
18  variants: VariantItem[];
19  className?: string;
20  itemClassName?: string;
21  labelClassName?: string;
22}
23 
24const VariantSelectorMultiple = ({
25  className,
26  itemClassName,
27  labelClassName,
28  onValuesChange,
29  values,
30  variants,
31}: VariantSelectorMultipleProps) => {
32  return (
33    <ToggleGroup
34      type="multiple"
35      className={cn("flex flex-wrap gap-3", className)}
36      value={values}
37      onValueChange={onValuesChange}
38    >
39      {variants.map((variant) => (
40        <div key={variant.id} className="flex items-center">
41          <ToggleGroupItem
42            value={variant.value}
43            disabled={variant.disabled}
44            className={cn(
45              "relative h-10 w-full min-w-[80px] rounded-md border border-gray-300 px-3 py-2 text-center text-sm transition-all",
46              "dark:border-gray-600 dark:text-gray-100",
47              "data-[state=on]:border-2 data-[state=on]:border-black dark:data-[state=on]:border-white",
48              "focus:ring-2 focus:ring-black focus:ring-offset-2 focus:outline-none",
49              "dark:focus:ring-white dark:focus:ring-offset-gray-900",
50              "cursor-pointer disabled:cursor-not-allowed disabled:opacity-50",
51              itemClassName
52            )}
53          >
54            <span className={cn("font-medium", labelClassName)}>
55              {variant.label}
56            </span>
57          </ToggleGroupItem>
58        </div>
59      ))}
60    </ToggleGroup>
61  );
62};
63 
64export default VariantSelectorMultiple;