75 lines
1.5 KiB
TypeScript
75 lines
1.5 KiB
TypeScript
import React from 'react';
|
|
|
|
interface StarRatingProps {
|
|
rating: number;
|
|
size?: 'small' | 'medium' | 'large';
|
|
className?: string;
|
|
}
|
|
|
|
const StarRating: React.FC<StarRatingProps> = ({
|
|
rating,
|
|
size = 'small',
|
|
className = ''
|
|
}) => {
|
|
const getSizeStyle = () => {
|
|
switch (size) {
|
|
case 'large':
|
|
return { fontSize: '1.5rem' };
|
|
case 'medium':
|
|
return { fontSize: '1.2rem' };
|
|
case 'small':
|
|
default:
|
|
return { fontSize: '1rem' };
|
|
}
|
|
};
|
|
|
|
const renderStars = () => {
|
|
const stars = [];
|
|
const fullStars = Math.floor(rating);
|
|
const hasHalfStar = rating % 1 !== 0;
|
|
|
|
// Render filled stars
|
|
for (let i = 0; i < fullStars; i++) {
|
|
stars.push(
|
|
<i
|
|
key={`filled-${i}`}
|
|
className="bi bi-star-fill"
|
|
style={{ color: '#ffc107' }}
|
|
></i>
|
|
);
|
|
}
|
|
|
|
// Render half star if needed
|
|
if (hasHalfStar) {
|
|
stars.push(
|
|
<i
|
|
key="half"
|
|
className="bi bi-star-half"
|
|
style={{ color: '#ffc107' }}
|
|
></i>
|
|
);
|
|
}
|
|
|
|
// Render empty stars
|
|
const emptyStars = 5 - Math.ceil(rating);
|
|
for (let i = 0; i < emptyStars; i++) {
|
|
stars.push(
|
|
<i
|
|
key={`empty-${i}`}
|
|
className="bi bi-star"
|
|
style={{ color: '#dee2e6' }}
|
|
></i>
|
|
);
|
|
}
|
|
|
|
return stars;
|
|
};
|
|
|
|
return (
|
|
<div className={`d-inline-flex align-items-center gap-1 ${className}`} style={getSizeStyle()}>
|
|
{renderStars()}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default StarRating; |