Upload components/MetricRing.jsx with huggingface_hub

components/MetricRing.jsx

@@ -0,0 +1,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