website refactor

apps/website/components/races/TelemetryLine.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Box } from '@/ui/Box';
+
+interface TelemetryLineProps {
+  color?: 'primary' | 'aqua' | 'amber' | 'green' | 'red';
+  height?: number | string;
+  animate?: boolean;
+  opacity?: number;
+  className?: string;
+}
+
+export function TelemetryLine({ 
+  color = 'primary', 
+  height = '2px', 
+  animate = false,
+  opacity = 1,
+  className = '' 
+}: TelemetryLineProps) {
+  const colorMap = {
+    primary: 'bg-primary-accent',
+    aqua: 'bg-telemetry-aqua',
+    amber: 'bg-warning-amber',
+    green: 'bg-success-green',
+    red: 'bg-critical-red',
+  };
+
+  return (
+    <Box 
+      height={height} 
+      fullWidth 
+      className={`${colorMap[color]} ${animate ? 'animate-pulse' : ''} ${className}`}
+      style={{
+        opacity,
+        boxShadow: `0 0 8px ${
+          color === 'primary' ? '#198CFF' : 
+          color === 'aqua' ? '#4ED4E0' : 
+          color === 'amber' ? '#FFBE4D' : 
+          color === 'green' ? '#6FE37A' : '#E35C5C'
+        }4D`
+      }}
+    />
+  );
+}