Spaces:
Build error
Build error
File size: 1,762 Bytes
10ca394 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | import { clsx } from 'clsx';
export default function MetricRing({ value, max, label, color = 'purple', size = 80, strokeWidth = 6 }) {
const radius = (size - strokeWidth) / 2;
const circumference = 2 * Math.PI * radius;
const percentage = Math.min((value / max) * 100, 100);
const offset = circumference - (percentage / 100) * circumference;
const colorMap = {
purple: { stroke: '#8b5cf6', text: 'text-purple-400', glow: 'rgba(139, 92, 246, 0.4)' },
cyan: { stroke: '#06b6d4', text: 'text-cyan-400', glow: 'rgba(6, 182, 212, 0.4)' },
green: { stroke: '#10b981', text: 'text-emerald-400', glow: 'rgba(16, 185, 129, 0.4)' },
amber: { stroke: '#f59e0b', text: 'text-amber-400', glow: 'rgba(245, 158, 11, 0.4)' },
red: { stroke: '#ef4444', text: 'text-red-400', glow: 'rgba(239, 68, 68, 0.4)' },
};
const colors = colorMap[color] || colorMap.purple;
return (
<div className="flex flex-col items-center gap-1">
<div className="relative" style={{ width: size, height: size }}>
<svg width={size} height={size} className="ring-chart">
<circle
cx={size / 2}
cy={size / 2}
r={radius}
fill="none"
stroke="rgba(139, 92, 246, 0.1)"
strokeWidth={strokeWidth}
/>
<circle
cx={size / 2}
cy={size / 2}
r={radius}
fill="none"
stroke={colors.stroke}
strokeWidth={strokeWidth}
strokeDasharray={circumference}
strokeDashoffset={offset}
strokeLinecap="round"
className="transition-all duration-1000 ease-out"
style={{ filter: `drop-shadow(0 0 4px ${colors.glow})` }}
/>
</svg |