Initial commit

src/components/krow/KrowScoreRing.jsx

@@ -0,0 +1,20 @@
+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 ? '#0A39DF' : 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>
+  );
+}