Initial web

web/components/TimeRangeSelector.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import { useApp } from '@/lib/context';
+import type { TimeRange, TimeMode } from '@/lib/types';
+
+const RANGES: TimeRange[] = ['30m', '1h', '6h', '24h', '7d', '30d'];
+
+export default function TimeRangeSelector() {
+  const { timeRange, setTimeRange, timeMode, setTimeMode } = useApp();
+
+  return (
+    <div className="flex items-center gap-3 flex-wrap">
+      <div className="flex rounded overflow-hidden border border-gray-700">
+        {RANGES.map(r => (
+          <button
+            key={r}
+            onClick={() => setTimeRange(r)}
+            className={`px-3 py-1 text-sm font-mono transition-colors ${
+              timeRange === r
+                ? 'bg-indigo-600 text-white'
+                : 'bg-gray-800 text-gray-300 hover:bg-gray-700'
+            }`}
+          >
+            {r}
+          </button>
+        ))}
+      </div>
+
+      <div className="flex rounded overflow-hidden border border-gray-700">
+        {(['real', 'tick'] as TimeMode[]).map(m => (
+          <button
+            key={m}
+            onClick={() => setTimeMode(m)}
+            className={`px-3 py-1 text-sm transition-colors ${
+              timeMode === m
+                ? 'bg-indigo-600 text-white'
+                : 'bg-gray-800 text-gray-300 hover:bg-gray-700'
+            }`}
+          >
+            {m === 'real' ? 'Real Time' : 'Game Tick'}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}