website refactor

apps/website/components/races/TelemetryStrip.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+
+interface TelemetryItem {
+  label: string;
+  value: string | number;
+  trend?: 'up' | 'down' | 'neutral';
+  color?: string;
+}
+
+interface TelemetryStripProps {
+  items: TelemetryItem[];
+  className?: string;
+}
+
+/**
+ * TelemetryStrip
+ * 
+ * A thin, dense strip showing key telemetry or performance metrics.
+ * Follows the "Precision Racing Minimal" theme.
+ */
+export function TelemetryStrip({ items, className = '' }: TelemetryStripProps) {
+  return (
+    <Box 
+      className={`bg-graphite-black/80 border-y border-border-gray/30 py-2 px-4 flex items-center gap-8 overflow-x-auto no-scrollbar ${className}`}
+    >
+      {items.map((item, index) => (
+        <Box key={index} display="flex" align="center" gap={2} className="whitespace-nowrap">
+          <Text size="xs" color="text-gray-500" uppercase weight="bold" letterSpacing="widest">
+            {item.label}
+          </Text>
+          <Text 
+            size="sm" 
+            weight="bold" 
+            style={{ color: item.color || '#4ED4E0' }}
+            className="font-mono"
+          >
+            {item.value}
+          </Text>
+          {item.trend && (
+            <Text size="xs" style={{ color: item.trend === 'up' ? '#10b981' : item.trend === 'down' ? '#ef4444' : '#94a3b8' }}>
+              {item.trend === 'up' ? '↑' : item.trend === 'down' ? '↓' : '•'}
+            </Text>
+          )}
+        </Box>
+      ))}
+    </Box>
+  );
+}