website refactor

apps/website/components/races/PenaltyRow.tsx

@@ -0,0 +1,62 @@
+
+
+import { Badge } from '@/ui/Badge';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Surface } from '@/ui/Surface';
+import { Text } from '@/ui/Text';
+
+interface PenaltyRowProps {
+  driverName: string;
+  type: string;
+  reason: string;
+  notes?: string;
+  value: string | number;
+  valueLabel?: string;
+}
+
+export function PenaltyRow({
+  driverName,
+  type,
+  reason,
+  notes,
+  value,
+  valueLabel,
+}: PenaltyRowProps) {
+  return (
+    <Surface variant="dark" rounded="lg" p={3} border borderColor="border-charcoal-outline/50">
+      <Stack direction="row" align="center" gap={3}>
+        <Box 
+          display="flex" 
+          h="10" 
+          w="10" 
+          alignItems="center" 
+          justifyContent="center" 
+          rounded="full" 
+          bg="bg-red-600/20"
+        >
+          <Text color="text-red-500" weight="bold">!</Text>
+        </Box>
+        <Box flexGrow={1}>
+          <Stack direction="row" align="center" gap={2} mb={1}>
+            <Text weight="medium" color="text-white">{driverName}</Text>
+            <Badge variant="danger">
+              {type.replace('_', ' ')}
+            </Badge>
+          </Stack>
+          <Text size="sm" color="text-gray-400" block>{reason}</Text>
+          {notes && (
+            <Text size="sm" color="text-gray-500" block mt={1} italic>
+              {notes}
+            </Text>
+          )}
+        </Box>
+        <Box textAlign="right">
+          <Text size="2xl" weight="bold" color="text-red-500">
+            {value} {valueLabel}
+          </Text>
+        </Box>
+      </Stack>
+    </Surface>
+  );
+}