Color Selector

1"use client";
2 
3import { useState } from "react";
4import { cn } from "@/lib/utils";
5 
6interface ColorSelectorProps {
7  colors: string[];
8  size?: "default" | "sm" | "lg";
9  defaultValue: string;
10  name?: string;
11  onColorSelect?: (color: string) => void;
12  className?: string;
13}
14 
15const colorMap = {
16  default: "var(--foreground)",
17  red: "var(--color-red-500)",
18  green: "var(--color-green-500)",
19  blue: "var(--color-blue-500)",
20  yellow: "var(--color-yellow-500)",
21  purple: "var(--color-purple-500)",
22  pink: "var(--color-pink-500)",
23  indigo: "var(--color-indigo-500)",
24  orange: "var(--color-orange-500)",
25  teal: "var(--color-teal-500)",
26  cyan: "var(--color-cyan-500)",
27  lime: "var(--color-lime-500)",
28  emerald: "var(--color-emerald-500)",
29  violet: "var(--color-violet-500)",
30  fuchsia: "var(--color-fuchsia-500)",
31  rose: "var(--color-rose-500)",
32  sky: "var(--color-sky-500)",
33  amber: "var(--color-amber-500)",
34} as const;
35 
36export function ColorSelector(
37  { colors, size = "default", defaultValue, name, onColorSelect, className }:
38    ColorSelectorProps,
39) {
40  const [selectedColor, setSelectedColor] = useState<string>(defaultValue);
41 
42  const handleColorSelect = (color: string) => {
43    setSelectedColor(color);
44    onColorSelect?.(color);
45  };
46 
47  const getSizeClass = (size: "default" | "sm" | "lg") => {
48    switch (size) {
49      case "sm":
50        return "size-4";
51      case "default":
52        return "size-5";
53      case "lg":
54        return "size-6";
55      default:
56        return "size-5";
57    }
58  };
59 
60  const getColorValue = (color: string): string => {
61    return colorMap[color as keyof typeof colorMap] || color;
62  };
63 
64  const sizeClass = getSizeClass(size);
65 
66  return (
67    <div className={cn("flex gap-2", className)}>
68      {name && (
69        <input
70          type="hidden"
71          name={name}
72          value={selectedColor}
73        />
74      )}
75      {colors.map((color) => {
76        const colorValue = getColorValue(color);
77        return (
78          <div
79            key={color}
80            className={`${sizeClass} rounded-full cursor-pointer transition-transform duration-200 active:scale-90 ${
81              selectedColor === color
82                ? "ring-2 ring-offset-2 ring-gray-400"
83                : ""
84            }`}
85            style={{
86              backgroundColor: colorValue,
87              ...(selectedColor === color && {
88                boxShadow:
89                  `inset 0 0 0 2px var(--background), 0 0 0 2px ${colorValue}`,
90              }),
91// … truncated