website refactor

apps/website/components/races/TrackConditionsPanel.tsx

@@ -0,0 +1,86 @@
+'use client';
+
+import React from 'react';
+import { Thermometer, Wind, Droplets, Sun, type LucideIcon } from 'lucide-react';
+import { Text } from '@/ui/Text';
+import { Stack } from '@/ui/Stack';
+import { Icon } from '@/ui/Icon';
+import { Box } from '@/ui/Box';
+
+interface TrackConditionsPanelProps {
+  airTemp: string;
+  trackTemp: string;
+  humidity: string;
+  windSpeed: string;
+  weatherType: string;
+}
+
+export function TrackConditionsPanel({
+  airTemp,
+  trackTemp,
+  humidity,
+  windSpeed,
+  weatherType,
+}: TrackConditionsPanelProps) {
+  return (
+    <Box as="section" bg="bg-surface-charcoal" border borderColor="border-outline-steel" p={4}>
+      <Text size="xs" weight="bold" color="text-gray-500" uppercase block mb={4}>
+        Track Conditions
+      </Text>
+      
+      <Box display="grid" gridCols={2} mdCols={4} gap={4}>
+        <ConditionItem 
+          icon={Thermometer} 
+          label="Air Temp" 
+          value={airTemp} 
+          color="text-warning-amber" 
+        />
+        <ConditionItem 
+          icon={Thermometer} 
+          label="Track Temp" 
+          value={trackTemp} 
+          color="text-critical-red" 
+        />
+        <ConditionItem 
+          icon={Droplets} 
+          label="Humidity" 
+          value={humidity} 
+          color="text-telemetry-aqua" 
+        />
+        <ConditionItem 
+          icon={Wind} 
+          label="Wind" 
+          value={windSpeed} 
+          color="text-gray-400" 
+        />
+      </Box>
+
+      <Box mt={4} pt={4} borderTop borderColor="border-outline-steel" bgOpacity={0.5} display="flex" alignItems="center" gap={3}>
+        <Icon icon={Sun} size={4} color="#FFBE4D" />
+        <Text size="sm" color="text-gray-300">{weatherType}</Text>
+      </Box>
+    </Box>
+  );
+}
+
+function ConditionItem({ 
+  icon, 
+  label, 
+  value, 
+  color 
+}: { 
+  icon: LucideIcon, 
+  label: string, 
+  value: string, 
+  color: string 
+}) {
+  return (
+    <Stack gap={1}>
+      <Stack direction="row" alignItems="center" gap={2}>
+        <Icon icon={icon} size={3} color="#6b7280" />
+        <Text size="xs" color="text-gray-500" weight="bold" uppercase>{label}</Text>
+      </Stack>
+      <Text size="lg" weight="bold" color={color}>{value}</Text>
+    </Stack>
+  );
+}