20 lines
1.1 KiB
JavaScript
20 lines
1.1 KiB
JavaScript
import React from 'react';
|
|
|
|
export default function KrowScoreRing({ score = 0, size = 64, label = 'KROW Score' }) {
|
|
const radius = (size - 8) / 2;
|
|
const circ = 2 * Math.PI * radius;
|
|
const offset = circ - (Math.min(100, score) / 100) * circ;
|
|
const color = score >= 80 ? '#0838E0' : score >= 60 ? '#333F48' : score >= 40 ? '#6B7280' : '#EF4444';
|
|
return (
|
|
<div className="flex flex-col items-center">
|
|
<div className="relative flex items-center justify-center" style={{ width: size, height: size }}>
|
|
<svg width={size} height={size} className="-rotate-90">
|
|
<circle cx={size / 2} cy={size / 2} r={radius} fill="none" stroke="#E5E7EB" strokeWidth="5" />
|
|
<circle cx={size / 2} cy={size / 2} r={radius} fill="none" stroke={color} strokeWidth="5" strokeDasharray={circ} strokeDashoffset={offset} strokeLinecap="round" />
|
|
</svg>
|
|
<span className="absolute font-bold text-[#111827]" style={{ fontSize: size * 0.28 }}>{score}</span>
|
|
</div>
|
|
{label && <span className="text-[11px] text-[#6B7280] mt-1">{label}</span>}
|
|
</div>
|
|
);
|
|
} |