67 lines
1.6 KiB
TypeScript
67 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
|
|
interface StarRatingProps {
|
|
value: number;
|
|
onChange?: (rating: number) => void;
|
|
disabled?: boolean;
|
|
size?: "sm" | "md" | "lg";
|
|
showValue?: boolean;
|
|
}
|
|
|
|
const sizeClasses = {
|
|
sm: "text-lg sm:text-xl",
|
|
md: "text-2xl sm:text-3xl",
|
|
lg: "text-4xl",
|
|
};
|
|
|
|
export default function StarRating({
|
|
value,
|
|
onChange,
|
|
disabled = false,
|
|
size = "md",
|
|
showValue = false,
|
|
}: StarRatingProps) {
|
|
const [hoverValue, setHoverValue] = useState(0);
|
|
|
|
const handleClick = (rating: number) => {
|
|
if (!disabled && onChange) {
|
|
onChange(rating);
|
|
}
|
|
};
|
|
|
|
const displayValue = hoverValue || value;
|
|
|
|
return (
|
|
<div className="flex flex-col items-center gap-2">
|
|
<div className="flex items-center justify-center gap-2">
|
|
{[1, 2, 3, 4, 5].map((star) => (
|
|
<button
|
|
key={star}
|
|
type="button"
|
|
onClick={() => handleClick(star)}
|
|
disabled={disabled}
|
|
onMouseEnter={() => !disabled && setHoverValue(star)}
|
|
onMouseLeave={() => !disabled && setHoverValue(0)}
|
|
className={`transition-transform hover:scale-110 disabled:hover:scale-100 disabled:cursor-not-allowed ${
|
|
star <= displayValue
|
|
? "text-pixel-gold"
|
|
: "text-gray-600 hover:text-gray-500"
|
|
} ${sizeClasses[size]}`}
|
|
aria-label={`Noter ${star} étoile${star > 1 ? "s" : ""}`}
|
|
>
|
|
★
|
|
</button>
|
|
))}
|
|
</div>
|
|
{showValue && value > 0 && (
|
|
<p className="text-gray-500 text-xs text-center">
|
|
{value}/5
|
|
</p>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|