star-rating-basic

1"use client";
2 
3import { cn } from "@/lib/utils";
4import { Star } from "lucide-react";
5import * as React from "react";
6 
7interface StarRatingBasicProps {
8  value: number;
9  onChange?: (value: number) => void;
10  className?: string;
11  iconSize?: number;
12  maxStars?: number;
13  readOnly?: boolean;
14  color?: string;
15}
16 
17const StarIcon = React.memo(
18  ({
19    iconSize,
20    index,
21    isInteractive,
22    onClick,
23    onMouseEnter,
24    style,
25  }: {
26    index: number;
27    style: React.CSSProperties;
28    iconSize: number;
29    onClick: () => void;
30    onMouseEnter: () => void;
31    isInteractive: boolean;
32  }) => (
33    <Star
34      key={index}
35      size={iconSize}
36      fill={style.fill}
37      color={style.color}
38      onClick={onClick}
39      onMouseEnter={onMouseEnter}
40      className={cn(
41        "transition-colors duration-200",
42        isInteractive && "cursor-pointer hover:scale-110"
43      )}
44      style={style}
45    />
46  )
47);
48StarIcon.displayName = "StarIcon";
49 
50const StarRating_Basic = ({
51  className,
52  color = "#e4c616",
53  iconSize = 24,
54  maxStars = 5,
55  onChange,
56  readOnly = false,
57  value,
58}: StarRatingBasicProps) => {
59  const [hoverRating, setHoverRating] = React.useState<number | null>(null);
60 
61  const handleStarClick = React.useCallback(
62    (index: number) => {
63      if (readOnly || !onChange) return;
64      const newRating = index + 1;
65      onChange(newRating);
66    },
67    [readOnly, onChange]
68  );
69 
70  const handleStarHover = React.useCallback(
71    (index: number) => {
72      if (!readOnly) {
73        setHoverRating(index + 1);
74      }
75    },
76    [readOnly]
77  );
78 
79  const handleMouseLeave = React.useCallback(() => {
80    if (!readOnly) {
81      setHoverRating(null);
82    }
83  }, [readOnly]);
84 
85  const getStarStyle = React.useCallback(
86    (index: number) => {
87      const ratingToUse =
88        !readOnly && hoverRating !== null ? hoverRating : value;
89      return {
90        color: ratingToUse > index ? color : "gray",
91        fill: ratingToUse > index ? color : "transparent",
92      } as React.CSSProperties;
93    },
94    [readOnly, hoverRating, value, color]
95  );
96 
97  const stars = React.useMemo(() => {
98    return Array.from({ length: maxStars }).map((_, index) => {
99      const style = getStarStyle(index);
100      return (
101        <StarIcon
102          key={index}
103          index={index}
104          style={style}
105          iconSize={iconSize}
106          onClick={() => handleStarClick(index)}
107          onMouseEnter={() => handleStarHover(index)}
108          isInteractive={!readOnly}
109// … truncated