face-rating-basic

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";
12 
13const DEFAULT_COLORS = {
14  angry: "red",
15  frown: "orange",
16  laugh: "green",
17  meh: "yellow",
18  smile: "lightgreen",
19};
20 
21interface FaceRatingBasicProps {
22  value: number;
23  onChange: (value: number) => void;
24  className?: string;
25  iconSize?: number;
26}
27 
28const FaceRating_Basic = ({
29  className,
30  iconSize = 24,
31  onChange,
32  value,
33}: FaceRatingBasicProps) => {
34  const handleIconClick = (index: number) => {
35    const newRating = index + 1;
36    onChange(newRating);
37  };
38 
39  const icons = [
40    <AngryIcon
41      key="angry"
42      size={iconSize}
43      color={value === 1 ? DEFAULT_COLORS.angry : "gray"}
44      onClick={() => handleIconClick(0)}
45      className="transition-transform duration-200 hover:scale-110"
46      style={{ cursor: "pointer" }}
47    />,
48    <FrownIcon
49      key="frown"
50      size={iconSize}
51      color={value === 2 ? DEFAULT_COLORS.frown : "gray"}
52      onClick={() => handleIconClick(1)}
53      className="transition-transform duration-200 hover:scale-110"
54      style={{ cursor: "pointer" }}
55    />,
56    <MehIcon
57      key="meh"
58      size={iconSize}
59      color={value === 3 ? DEFAULT_COLORS.meh : "gray"}
60      onClick={() => handleIconClick(2)}
61      className="transition-transform duration-200 hover:scale-110"
62      style={{ cursor: "pointer" }}
63    />,
64    <SmileIcon
65      key="smile"
66      size={iconSize}
67      color={value === 4 ? DEFAULT_COLORS.smile : "gray"}
68      onClick={() => handleIconClick(3)}
69      className="transition-transform duration-200 hover:scale-110"
70      style={{ cursor: "pointer" }}
71    />,
72    <LaughIcon
73      key="laugh"
74      size={iconSize}
75      color={value === 5 ? DEFAULT_COLORS.laugh : "gray"}
76      onClick={() => handleIconClick(4)}
77      className="transition-transform duration-200 hover:scale-110"
78      style={{ cursor: "pointer" }}
79    />,
80  ];
81 
82  return (
83    <div className={cn("flex items-center gap-x-0.5", className)}>{icons}</div>
84  );
85};
86 
87export default FaceRating_Basic;