website refactor

apps/website/components/races/RacePenaltyRow.tsx

@@ -0,0 +1,58 @@
+'use client';
+
+import React from 'react';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { Surface } from '@/ui/Surface';
+
+interface PenaltyEntry {
+  driverId: string;
+  driverName: string;
+  type: 'time_penalty' | 'grid_penalty' | 'points_deduction' | 'disqualification' | 'warning' | 'license_points';
+  value: number;
+  reason: string;
+  notes?: string;
+}
+
+interface RacePenaltyRowProps {
+  penalty: PenaltyEntry;
+}
+
+export function RacePenaltyRow({ penalty }: RacePenaltyRowProps) {
+  return (
+    <Surface variant="dark" rounded="lg" padding={3}>
+      <Stack direction="row" align="center" gap={3}>
+        <Surface variant="muted" rounded="full" padding={1} style={{ width: '2.5rem', height: '2.5rem', backgroundColor: 'rgba(239, 68, 68, 0.2)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+          <Text color="text-error-red" weight="bold">!</Text>
+        </Surface>
+        <Box style={{ flex: 1 }}>
+          <Stack direction="row" align="center" gap={2} mb={1}>
+            <Text weight="medium" color="text-white">{penalty.driverName}</Text>
+            <Surface variant="muted" rounded="full" padding={1} style={{ backgroundColor: 'rgba(239, 68, 68, 0.2)', paddingLeft: '0.5rem', paddingRight: '0.5rem' }}>
+              <Text size="xs" weight="medium" color="text-error-red" style={{ textTransform: 'capitalize' }}>
+                {penalty.type.replace('_', ' ')}
+              </Text>
+            </Surface>
+          </Stack>
+          <Text size="sm" color="text-gray-400" block>{penalty.reason}</Text>
+          {penalty.notes && (
+            <Box mt={1}>
+              <Text size="sm" color="text-gray-500" block style={{ fontStyle: 'italic' }}>{penalty.notes}</Text>
+            </Box>
+          )}
+        </Box>
+        <Box style={{ textAlign: 'right' }}>
+          <Text size="2xl" weight="bold" color="text-error-red">
+            {penalty.type === 'time_penalty' && `+${penalty.value}s`}
+            {penalty.type === 'grid_penalty' && `+${penalty.value} grid`}
+            {penalty.type === 'points_deduction' && `-${penalty.value} pts`}
+            {penalty.type === 'disqualification' && 'DSQ'}
+            {penalty.type === 'warning' && 'Warning'}
+            {penalty.type === 'license_points' && `${penalty.value} LP`}
+          </Text>
+        </Box>
+      </Stack>
+    </Surface>
+  );
+}