face-rating-gradient

1"use client";
2 
3import { cn } from "@/lib/utils";
4import {
5  AngryIcon,
6  FrownIcon,
7  LaughIcon,
8  MehIcon,
9  SmileIcon,
10} from "lucide-react";
11import * as React from "react";
12import tinycolor from "tinycolor2";
13 
14interface FaceRatingGradientProps {
15  value: number;
16  onChange: (value: number) => void;
17  className?: string;
18  iconSize?: number;
19  baseColor?: string;
20}
21 
22const FaceRating_Gradient = ({
23  baseColor = "#22c55e", // Default green color
24  className,
25  iconSize = 24,
26  onChange,
27  value,
28}: FaceRatingGradientProps) => {
29  const generateColorGradient = (baseColor: string, steps: number) => {
30    const color = tinycolor(baseColor);
31    const hsl = color.toHsl();
32 
33    return Array.from({ length: steps }, (_, i) => {
34      const lightness = hsl.l - i * 0.1;
35      return tinycolor({ ...hsl, l: Math.max(0.2, lightness) }).toHexString();
36    }).reverse();
37  };
38 
39  const colors = generateColorGradient(baseColor, 5);
40 
41  const handleIconClick = (index: number) => {
42    const newRating = index + 1;
43    onChange(newRating);
44  };
45 
46  const isActive = (index: number) => {
47    return index < value;
48  };
49 
50  const icons = [
51    <AngryIcon
52      key="angry"
53      size={iconSize}
54      color={isActive(0) ? colors[0] : "gray"}
55      onClick={() => handleIconClick(0)}
56      className="transition-transform duration-200 hover:scale-110"
57      style={{ cursor: "pointer" }}
58    />,
59    <FrownIcon
60      key="frown"
61      size={iconSize}
62      color={isActive(1) ? colors[1] : "gray"}
63      onClick={() => handleIconClick(1)}
64      className="transition-transform duration-200 hover:scale-110"
65      style={{ cursor: "pointer" }}
66    />,
67    <MehIcon
68      key="meh"
69      size={iconSize}
70      color={isActive(2) ? colors[2] : "gray"}
71      onClick={() => handleIconClick(2)}
72      className="transition-transform duration-200 hover:scale-110"
73      style={{ cursor: "pointer" }}
74    />,
75    <SmileIcon
76      key="smile"
77      size={iconSize}
78      color={isActive(3) ? colors[3] : "gray"}
79      onClick={() => handleIconClick(3)}
80      className="transition-transform duration-200 hover:scale-110"
81      style={{ cursor: "pointer" }}
82    />,
83    <LaughIcon
84      key="laugh"
85      size={iconSize}
86      color={isActive(4) ? colors[4] : "gray"}
87      onClick={() => handleIconClick(4)}
88      className="transition-transform duration-200 hover:scale-110"
89      style={{ cursor: "pointer" }}
90    />,
91  ];
92 
93  return (
94    <div className={cn("flex items-center gap-x-0.5", className)}>{icons}</div>
95// … truncated