variant-color-selector-basic

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";
8 
9export interface ColorVariantItem {
10  id: string;
11  value: string;
12  color: string;
13  label: string;
14}
15 
16interface VariantColorSelectorBasicProps {
17  value: string;
18  onValueChange: (value: string) => void;
19  variants: ColorVariantItem[];
20  className?: string;
21}
22 
23const VariantColorSelectorBasic = ({
24  className,
25  onValueChange,
26  value,
27  variants,
28}: VariantColorSelectorBasicProps) => {
29  return (
30    <RadioGroupPrimitive.Root
31      className={cn("flex flex-wrap gap-3", className)}
32      value={value}
33      onValueChange={onValueChange}
34    >
35      {variants.map((variant) => (
36        <label
37          key={variant.id}
38          className="relative flex cursor-pointer flex-col items-center gap-2"
39        >
40          <RadioGroupPrimitive.Item
41            value={variant.value}
42            className={cn(
43              "ring-offset-background focus-visible:ring-ring aspect-square size-6 rounded-full border-2 focus:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
44              "has-data-[state=checked]:ring-4",
45              "has-data-[state=checked]:border-0"
46            )}
47            style={{
48              backgroundColor: variant.color,
49              color: getContrastYIQ(variant.color),
50            }}
51          >
52            <RadioGroupPrimitive.Indicator className="flex h-full items-center justify-center">
53              <Circle className="h-2.5 w-2.5 fill-current text-current" />
54            </RadioGroupPrimitive.Indicator>
55          </RadioGroupPrimitive.Item>
56          <span className="text-foreground text-sm leading-none font-medium">
57            {variant.label}
58          </span>
59        </label>
60      ))}
61    </RadioGroupPrimitive.Root>
62  );
63};
64 
65export default VariantColorSelectorBasic;
66 
67/**
68 * Choose the best color for text based on the background color
69 * Supports HEX and RGB colors
70 * @param color
71 * @returns
72 */
73function getContrastYIQ(color: string) {
74  let r, g, b;
75 
76  if (color.startsWith("#")) {
77    // HEX color
78    color = color.replace("#", "");
79    r = parseInt(color.substring(0, 2), 16);
80    g = parseInt(color.substring(2, 4), 16);
81    b = parseInt(color.substring(4, 6), 16);
82  } else if (color.startsWith("rgb")) {
83    // RGB color
84    const rgbValues = color.match(/\d+/g);
85// … truncated