Initial Commit

2026-06-06 13:23:33 +01:00
commit 1a0d45dd67
58 changed files with 5268 additions and 0 deletions
@@ -0,0 +1,43 @@
+const ZONE_CONFIG = [
+  { key: 'z1', label: 'Z1 Recovery', color: '#60a5fa' },
+  { key: 'z2', label: 'Z2 Base', color: '#34d399' },
+  { key: 'z3', label: 'Z3 Tempo', color: '#fbbf24' },
+  { key: 'z4', label: 'Z4 Threshold', color: '#f97316' },
+  { key: 'z5', label: 'Z5 Max', color: '#f43f5e' },
+]
+
+export default function HRZoneBar({ zones }) {
+  return (
+    <div className="space-y-2">
+      {/* Stacked bar */}
+      <div className="flex h-4 rounded-full overflow-hidden gap-0.5">
+        {ZONE_CONFIG.map(({ key, color }) => {
+          const pct = zones[key] || 0
+          if (pct < 0.5) return null
+          return (
+            <div
+              key={key}
+              style={{ width: `${pct}%`, backgroundColor: color }}
+              className="h-full"
+              title={`${key.toUpperCase()}: ${pct}%`}
+            />
+          )
+        })}
+      </div>
+
+      {/* Legend */}
+      <div className="flex flex-wrap gap-4">
+        {ZONE_CONFIG.map(({ key, label, color }) => {
+          const pct = zones[key] || 0
+          return (
+            <div key={key} className="flex items-center gap-1.5">
+              <div className="w-2.5 h-2.5 rounded-sm" style={{ backgroundColor: color }} />
+              <span className="text-xs text-gray-400">{label}</span>
+              <span className="text-xs font-medium text-white">{pct}%</span>
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}