Rating Group

1"use client";
2 
3import * as React from "react";
4import { StarIcon } from "lucide-react";
5import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
6import { cn } from "@/lib/utils";
7 
8interface RatingGroupProps {
9  value?: string;
10  onValueChange?: (value: string) => void;
11  max?: number;
12  className?: string;
13  disabled?: boolean;
14  size?: "default" | "sm" | "lg";
15}
16 
17function RatingGroup({
18  value = "0",
19  onValueChange,
20  max = 5,
21  className,
22  disabled = false,
23  size = "default",
24  ...props
25}: RatingGroupProps) {
26  const [hoveredValue, setHoveredValue] = React.useState<number | null>(null);
27  const currentValue = React.useMemo(() => parseInt(value || "0", 10), [value]);
28  const displayValue = hoveredValue ?? currentValue;
29 
30  const starIndices = React.useMemo(
31    () => Array.from({ length: max }, (_, i) => i + 1),
32    [max],
33  );
34 
35  const handleMouseEnter = React.useCallback(
36    (starValue: number) => {
37      if (!disabled) {
38        setHoveredValue(starValue);
39      }
40    },
41    [disabled],
42  );
43 
44  const handleMouseLeave = React.useCallback(() => {
45    setHoveredValue(null);
46  }, []);
47 
48  return (
49    <ToggleGroup
50      value={[value]}
51      onValueChange={(groupValue) =>
52        onValueChange?.(groupValue[groupValue.length - 1] || "0")
53      }
54      size={size}
55      className={cn("gap-0", className)}
56      disabled={disabled}
57      onMouseLeave={handleMouseLeave}
58      {...props}
59    >
60      {starIndices.map((starIndex) => {
61        const starValue = starIndex.toString();
62        const isActive = starIndex <= displayValue;
63        return (
64          <ToggleGroupItem
65            key={starValue}
66            value={starValue}
67            aria-label={`${starIndex} star rating`}
68            className={cn(
69              "relative border-0 bg-transparent p-0 hover:bg-transparent data-pressed:bg-transparent focus-visible:ring-0",
70              "hover:scale-110 focus-visible:scale-110 transition-transform ease-out",
71              disabled && "pointer-events-none opacity-50",
72            )}
73            onMouseEnter={() => handleMouseEnter(starIndex)}
74            disabled={disabled}
75          >
76            <StarIcon
77              className={cn(
78                "transition-colors ease-out",
79                size === "sm" && "size-4",
80                size === "default" && "size-5",
81                size === "lg" && "size-6",
82                isActive
83                  ? "fill-yellow-400 text-yellow-400"
84// … truncated