variant-selector-basic

1"use client";
2 
3import * as React from "react";
4import * as RadioGroupPrimitive from "@radix-ui/react-radio-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 VariantSelectorBasicProps {
16  value: string;
17  onValueChange: (value: string) => void;
18  variants: VariantItem[];
19  className?: string;
20  itemClassName?: string;
21  labelClassName?: string;
22  // selectedClassName is being removed as redundant
23}
24 
25const VariantSelectorBasic = ({
26  className,
27  itemClassName,
28  labelClassName,
29  onValueChange,
30  value,
31  variants,
32}: VariantSelectorBasicProps) => {
33  return (
34    <RadioGroupPrimitive.Root
35      className={cn("flex flex-wrap gap-3", className)}
36      value={value}
37      onValueChange={onValueChange}
38    >
39      {variants.map((variant) => (
40        <div key={variant.id} className="flex items-center">
41          <RadioGroupPrimitive.Item
42            id={variant.id}
43            value={variant.value}
44            disabled={variant.disabled}
45            className={cn(
46              "peer relative h-10 w-full min-w-[80px] rounded-md border border-gray-300 px-3 py-2 text-center text-sm transition-all",
47              "dark:border-gray-600 dark:text-gray-100",
48              "data-[state=checked]:border-black dark:data-[state=checked]:border-white",
49              "focus:ring-2 focus:ring-black focus:ring-offset-2 focus:outline-none",
50              "dark:focus:ring-white dark:focus:ring-offset-gray-900",
51              "cursor-pointer disabled:cursor-not-allowed disabled:opacity-50",
52              itemClassName
53            )}
54          >
55            <span className={cn("font-medium", labelClassName)}>
56              {variant.label}
57            </span>
58          </RadioGroupPrimitive.Item>
59        </div>
60      ))}
61    </RadioGroupPrimitive.Root>
62  );
63};
64 
65export default VariantSelectorBasic;