Spaces:
Sleeping
Sleeping
| 'use client'; | |
| interface ScoreRingProps { | |
| score: number; | |
| maxScore: number; | |
| size?: number; | |
| strokeWidth?: number; | |
| label?: string; | |
| showPercentage?: boolean; | |
| color?: string; | |
| } | |
| export default function ScoreRing({ | |
| score, | |
| maxScore, | |
| size = 120, | |
| strokeWidth = 8, | |
| label, | |
| showPercentage = true, | |
| color, | |
| }: ScoreRingProps) { | |
| const radius = (size - strokeWidth) / 2; | |
| const circumference = 2 * Math.PI * radius; | |
| const percentage = Math.min((score / maxScore) * 100, 100); | |
| const offset = circumference - (percentage / 100) * circumference; | |
| const getColor = () => { | |
| if (color) return color; | |
| if (percentage >= 80) return 'var(--success)'; | |
| if (percentage >= 60) return 'var(--primary)'; | |
| if (percentage >= 40) return 'var(--warning)'; | |
| return 'var(--danger)'; | |
| }; | |
| const ringColor = getColor(); | |
| return ( | |
| <div className="flex flex-col items-center gap-2"> | |
| <div className="relative" style={{ width: size, height: size }}> | |
| <svg | |
| width={size} | |
| height={size} | |
| className="score-ring" | |
| > | |
| {/* Background circle */} | |
| <circle | |
| cx={size / 2} | |
| cy={size / 2} | |
| r={radius} | |
| fill="none" | |
| stroke="var(--border)" | |
| strokeWidth={strokeWidth} | |
| /> | |
| {/* Score circle */} | |
| <circle | |
| cx={size / 2} | |
| cy={size / 2} | |
| r={radius} | |
| fill="none" | |
| stroke={ringColor} | |
| strokeWidth={strokeWidth} | |
| strokeLinecap="round" | |
| strokeDasharray={circumference} | |
| strokeDashoffset={offset} | |
| style={{ | |
| filter: `drop-shadow(0 0 6px ${ringColor}40)`, | |
| }} | |
| /> | |
| </svg> | |
| {/* Center text */} | |
| <div | |
| className="absolute inset-0 flex flex-col items-center justify-center" | |
| > | |
| <span | |
| className="font-bold" | |
| style={{ fontSize: size * 0.22, color: ringColor }} | |
| > | |
| {showPercentage ? `${Math.round(percentage)}%` : score.toFixed(1)} | |
| </span> | |
| {!showPercentage && ( | |
| <span className="text-xs" style={{ color: 'var(--muted)' }}> | |
| / {maxScore} | |
| </span> | |
| )} | |
| </div> | |
| </div> | |
| {label && ( | |
| <span className="text-sm font-medium" style={{ color: 'var(--muted-light)' }}> | |
| {label} | |
| </span> | |
| )} | |
| </div> | |
| ); | |
| } | |