36 lines
1015 B
TypeScript
36 lines
1015 B
TypeScript
import { Star } from "lucide-react";
|
|
|
|
export type EventRatingsSummary = {
|
|
average: number;
|
|
count: number;
|
|
};
|
|
|
|
export function EventRatingBadge({ ratings }: { ratings: EventRatingsSummary | null | undefined }) {
|
|
const count = ratings?.count ?? 0;
|
|
const average = ratings?.average ?? 0;
|
|
if (!count || count <= 0 || !Number.isFinite(average) || average <= 0) return null;
|
|
|
|
const full = Math.floor(average);
|
|
const hasHalf = average % 1 >= 0.4;
|
|
|
|
return (
|
|
<>
|
|
<div className="flex gap-0.5" aria-hidden>
|
|
{[1, 2, 3, 4, 5].map((i) => {
|
|
const filled = i <= full || (i === full + 1 && hasHalf);
|
|
return (
|
|
<Star
|
|
key={i}
|
|
className={`size-3 ${filled ? "fill-amber-400 text-amber-400" : "text-[#c7c7cc]"}`}
|
|
strokeWidth={filled ? 0 : 1.75}
|
|
/>
|
|
);
|
|
})}
|
|
</div>
|
|
<span className="text-[var(--theme-card-text-color)]/60">
|
|
{average.toFixed(1)} ({count})
|
|
</span>
|
|
</>
|
|
);
|
|
}
|