40 lines
1.0 KiB
TypeScript
40 lines
1.0 KiB
TypeScript
import { cn } from '@/lib/utils';
|
|
|
|
interface ScoreBarProps {
|
|
label: string;
|
|
score: number;
|
|
className?: string;
|
|
}
|
|
|
|
export function ScoreBar({ label, score, className }: ScoreBarProps) {
|
|
const clipped = Math.min(100, Math.max(0, score));
|
|
|
|
const color =
|
|
clipped >= 80
|
|
? 'bg-green-500'
|
|
: clipped >= 60
|
|
? 'bg-yellow-500'
|
|
: 'bg-red-500';
|
|
|
|
const verdict =
|
|
clipped >= 80 ? '优秀' : clipped >= 60 ? '需改进' : '不合格';
|
|
|
|
return (
|
|
<div className={cn('space-y-1', className)}>
|
|
<div className="flex justify-between text-xs text-muted-foreground">
|
|
<span>{label}</span>
|
|
<span className="font-medium tabular-nums">
|
|
{clipped}
|
|
<span className="text-muted-foreground/60 ml-1">({verdict})</span>
|
|
</span>
|
|
</div>
|
|
<div className="h-1.5 w-full rounded-full bg-muted overflow-hidden">
|
|
<div
|
|
className={cn('h-full rounded-full transition-all duration-500', color)}
|
|
style={{ width: `${clipped}%` }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|