46 lines
1.3 KiB
TypeScript
46 lines
1.3 KiB
TypeScript
'use client'
|
|
|
|
import React from 'react'
|
|
|
|
interface StarRatingProps {
|
|
stars: number // 0-3
|
|
total?: number // total stars earned (shown as badge)
|
|
size?: 'sm' | 'md' | 'lg'
|
|
animated?: boolean
|
|
showLabel?: boolean
|
|
}
|
|
|
|
const sizeMap = { sm: 'text-lg', md: 'text-2xl', lg: 'text-4xl' }
|
|
|
|
export function StarRating({ stars, total, size = 'md', animated = false, showLabel = false }: StarRatingProps) {
|
|
return (
|
|
<div className="inline-flex items-center gap-1">
|
|
{[1, 2, 3].map((i) => (
|
|
<span
|
|
key={i}
|
|
className={`${sizeMap[size]} transition-all ${
|
|
i <= stars
|
|
? `text-yellow-400 ${animated ? 'animate-bounce' : ''}`
|
|
: 'text-gray-300 dark:text-gray-600'
|
|
}`}
|
|
style={animated && i <= stars ? { animationDelay: `${(i - 1) * 150}ms` } : undefined}
|
|
>
|
|
{i <= stars ? '\u2B50' : '\u2606'}
|
|
</span>
|
|
))}
|
|
{total != null && showLabel && (
|
|
<span className="ml-1 text-sm font-bold text-yellow-500 tabular-nums">{total}</span>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
/** Calculate stars from accuracy percentage */
|
|
export function accuracyToStars(correct: number, total: number): number {
|
|
if (total === 0) return 0
|
|
const pct = (correct / total) * 100
|
|
if (pct >= 100) return 3
|
|
if (pct >= 70) return 2
|
|
return 1
|
|
}
|