40 lines
942 B
TypeScript
40 lines
942 B
TypeScript
import { FaRegStar, FaStar, FaStarHalfAlt } from "react-icons/fa";
|
|
|
|
interface StarRatingProps {
|
|
rating: number;
|
|
maxRating?: number;
|
|
color?: string;
|
|
size?: number;
|
|
}
|
|
|
|
export function StarRating({
|
|
rating,
|
|
maxRating = 5,
|
|
color = "#FFD700", // Gold color for stars
|
|
size = 20
|
|
}: StarRatingProps) {
|
|
// Create an array of star elements
|
|
const stars = [];
|
|
|
|
// Fill in full and half stars
|
|
for (let i = 1; i <= maxRating; i++) {
|
|
if (i <= rating) {
|
|
// Full star
|
|
stars.push(
|
|
<FaStar key={i} color={color} size={size} className="inline" />
|
|
);
|
|
} else if (i - 0.5 <= rating) {
|
|
// Half star
|
|
stars.push(
|
|
<FaStarHalfAlt key={i} color={color} size={size} className="inline" />
|
|
);
|
|
} else {
|
|
// Empty star
|
|
stars.push(
|
|
<FaRegStar key={i} color={color} size={size} className="inline" />
|
|
);
|
|
}
|
|
}
|
|
|
|
return <div className="flex">{stars}</div>;
|
|
}
|