star-rating-fractions

1"use client";
2 
3import { cn } from "@/lib/utils";
4import { Star } from "lucide-react";
5import * as React from "react";
6 
7// Add ID generator outside component to maintain counter
8let nextId = 0;
9const generateStarIds = (count: number) =>
10  Array.from({ length: count }, () => `star-${nextId++}`);
11 
12interface StarRatingBasicProps {
13  value: number;
14  onChange?: (value: number) => void;
15  className?: string;
16  iconSize?: number;
17  maxStars?: number;
18  readOnly?: boolean;
19  color?: string;
20}
21 
22const StarIcon = React.memo(
23  ({
24    iconSize,
25    index,
26    isInteractive,
27    onClick,
28    onMouseMove,
29    style,
30  }: {
31    index: number;
32    style: React.CSSProperties;
33    iconSize: number;
34    onClick: (e: React.MouseEvent<SVGElement>) => void;
35    onMouseMove: (e: React.MouseEvent<SVGElement>) => void;
36    isInteractive: boolean;
37  }) => (
38    <Star
39      key={index}
40      size={iconSize}
41      fill={style.fill}
42      color={style.color}
43      onClick={onClick}
44      onMouseMove={onMouseMove}
45      className={cn(
46        "transition-colors duration-200",
47        isInteractive && "cursor-pointer"
48      )}
49      style={style}
50    />
51  )
52);
53StarIcon.displayName = "StarIcon";
54 
55const StarRating_Fractions = ({
56  className,
57  color = "#e4c616",
58  iconSize = 24,
59  maxStars = 5,
60  onChange,
61  readOnly = false,
62  value,
63}: StarRatingBasicProps) => {
64  const [hoverRating, setHoverRating] = React.useState<number | null>(null);
65  // Generate stable IDs on component mount
66  const [starIds] = React.useState(() => generateStarIds(maxStars));
67 
68  const calculateRating = React.useCallback(
69    (index: number, event: React.MouseEvent<SVGElement>) => {
70      const star = event.currentTarget;
71      const rect = star.getBoundingClientRect();
72      const x = event.clientX - rect.left;
73      const width = rect.width;
74      const clickPosition = x / width;
75 
76      let fraction = 1;
77      if (clickPosition <= 0.25) fraction = 0.25;
78      else if (clickPosition <= 0.5) fraction = 0.5;
79      else if (clickPosition <= 0.75) fraction = 0.75;
80 
81      return index + fraction;
82    },
83    []
84  );
85 
86  const handleStarClick = React.useCallback(
87    (index: number, event: React.MouseEvent<SVGElement>) => {
88      if (readOnly || !onChange) return;
89      const newRating = calculateRating(index, event);
90      onChange(newRating);
91    },
92    [readOnly, onChange, calculateRating]
93  );
94 
95  const handleStarHover = React.useCallback(
96    (index: number, event: React.MouseEvent<SVGElement>) => {
97// … truncated