variant-selector-images

1"use client";
2 
3import * as React from "react";
4import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
5import { Circle } from "lucide-react";
6 
7import { cn } from "@/lib/utils";
8import Image from "next/image";
9 
10export interface VariantItem {
11  id: string;
12  value: string;
13  label: string;
14  url: string;
15  disabled?: boolean;
16}
17 
18interface VariantSelectorImagesProps {
19  value: string;
20  onValueChange: (value: string) => void;
21  variants: VariantItem[];
22  className?: string;
23}
24 
25const VariantSelectorImages = ({
26  className,
27  onValueChange,
28  value,
29  variants,
30}: VariantSelectorImagesProps) => {
31  return (
32    <RadioGroupPrimitive.Root
33      className={cn("grid grid-cols-2 gap-2 sm:grid-cols-3", className)}
34      value={value}
35      onValueChange={onValueChange}
36    >
37      {variants.map((variant) => (
38        <label
39          key={variant.id}
40          className="border-input has-data-[state=checked]:border-ring has-data-[state=checked]:bg-accent has-focus-visible:outline-ring/70 relative flex cursor-pointer flex-col items-center gap-3 rounded-lg border px-2 py-3 text-center shadow-xs shadow-black/5 outline-offset-2 transition-colors has-focus-visible:outline has-data-disabled:cursor-not-allowed has-data-disabled:opacity-50"
41        >
42          <RadioGroupPrimitive.Item
43            value={variant.value}
44            disabled={variant.disabled}
45            className="sr-only after:absolute after:inset-0"
46          >
47            <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
48              <Circle className="h-2.5 w-2.5 fill-current text-current" />
49            </RadioGroupPrimitive.Indicator>
50          </RadioGroupPrimitive.Item>
51          <Image
52            alt={variant.label}
53            src={variant.url}
54            width={150}
55            height={150}
56            unoptimized
57          />
58          <p className="text-muted-foreground text-xs">{variant.label}</p>
59        </label>
60      ))}
61    </RadioGroupPrimitive.Root>
62  );
63};
64 
65export default VariantSelectorImages;