43 lines
1.2 KiB
TypeScript
43 lines
1.2 KiB
TypeScript
import React from 'react';
|
|
import { Star } from 'lucide-react';
|
|
|
|
interface RatingStarsProps {
|
|
rating: number;
|
|
max?: number;
|
|
size?: number;
|
|
className?: string;
|
|
}
|
|
|
|
export const RatingStars: React.FC<RatingStarsProps> = ({
|
|
rating,
|
|
max = 5,
|
|
size = 16,
|
|
className = '',
|
|
}) => {
|
|
const stars = [];
|
|
const roundedRating = Math.round(rating * 2) / 2;
|
|
|
|
for (let i = 1; i <= max; i++) {
|
|
const isFull = i <= roundedRating;
|
|
const isHalf = !isFull && i - 0.5 <= roundedRating;
|
|
|
|
stars.push(
|
|
<span key={i} className="text-[#FFB21E] inline-flex">
|
|
{isFull ? (
|
|
<Star size={size} fill="currentColor" stroke="currentColor" />
|
|
) : isHalf ? (
|
|
<span className="relative inline-flex" style={{ width: size, height: size }}>
|
|
<Star size={size} className="absolute top-0 left-0 text-gray-300" />
|
|
<span className="absolute top-0 left-0 overflow-hidden" style={{ width: '50%' }}>
|
|
<Star size={size} fill="currentColor" stroke="currentColor" />
|
|
</span>
|
|
</span>
|
|
) : (
|
|
<Star size={size} className="text-gray-300" />
|
|
)}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
return <div className={`flex items-center gap-0.5 ${className}`}>{stars}</div>;
|
|
};
|