website refactor

2026-01-14 23:46:04 +01:00
parent c1a86348d7
commit 4a2d7d15a5
294 changed files with 5637 additions and 3418 deletions
--- a/apps/website/components/races/RaceResultRow.tsx
+++ b/apps/website/components/races/RaceResultRow.tsx
@@ -0,0 +1,107 @@
+'use client';
+
+import React from 'react';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { Image } from '@/ui/Image';
+import { Surface } from '@/ui/Surface';
+import { CountryFlagDisplay } from '@/lib/display-objects/CountryFlagDisplay';
+
+interface ResultEntry {
+  position: number;
+  driverId: string;
+  driverName: string;
+  driverAvatar: string;
+  country: string;
+  car: string;
+  laps: number;
+  time: string;
+  fastestLap: string;
+  points: number;
+  incidents: number;
+  isCurrentUser: boolean;
+}
+
+interface RaceResultRowProps {
+  result: ResultEntry;
+  points: number;
+}
+
+export function RaceResultRow({ result, points }: RaceResultRowProps) {
+  const { isCurrentUser, position, driverAvatar, driverName, country, car, laps, incidents, time, fastestLap } = result;
+
+  return (
+    <Surface
+      variant={isCurrentUser ? 'muted' : 'dark'}
+      rounded="xl"
+      border={isCurrentUser}
+      padding={3}
+      style={{ 
+        background: isCurrentUser ? 'linear-gradient(to right, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.1), transparent)' : undefined,
+        borderColor: isCurrentUser ? 'rgba(59, 130, 246, 0.4)' : undefined
+      }}
+    >
+      <Stack direction="row" align="center" gap={3}>
+        {/* Position */}
+        <Surface 
+          variant="muted" 
+          rounded="lg" 
+          padding={1} 
+          style={{ 
+            width: '2.5rem', 
+            height: '2.5rem', 
+            display: 'flex', 
+            alignItems: 'center', 
+            justifyContent: 'center',
+            backgroundColor: position === 1 ? 'rgba(250, 204, 21, 0.2)' : position === 2 ? 'rgba(209, 213, 219, 0.2)' : position === 3 ? 'rgba(217, 119, 6, 0.2)' : 'rgba(38, 38, 38, 0.5)',
+            color: position === 1 ? '#facc15' : position === 2 ? '#d1d5db' : position === 3 ? '#d97706' : '#737373'
+          }}
+        >
+          <Text weight="bold">{position}</Text>
+        </Surface>
+
+        {/* Avatar */}
+        <Box style={{ position: 'relative', flexShrink: 0 }}>
+          <Box style={{ width: '2.5rem', height: '2.5rem', borderRadius: '9999px', overflow: 'hidden', border: isCurrentUser ? '2px solid rgba(59, 130, 246, 0.5)' : 'none' }}>
+            <Image src={driverAvatar} alt={driverName} width={40} height={40} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
+          </Box>
+          <Box style={{ position: 'absolute', bottom: '-0.125rem', right: '-0.125rem', width: '1.25rem', height: '1.25rem', borderRadius: '9999px', backgroundColor: '#0f1115', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '0.625rem' }}>
+            {CountryFlagDisplay.fromCountryCode(country).toString()}
+          </Box>
+        </Box>
+
+        {/* Driver Info */}
+        <Box style={{ flex: 1, minWidth: 0 }}>
+          <Stack direction="row" align="center" gap={2}>
+            <Text weight="semibold" size="sm" color={isCurrentUser ? 'text-primary-blue' : 'text-white'} truncate>{driverName}</Text>
+            {isCurrentUser && (
+              <Surface variant="muted" rounded="full" padding={1} style={{ backgroundColor: '#3b82f6', paddingLeft: '0.5rem', paddingRight: '0.5rem' }}>
+                <Text size="xs" weight="bold" color="text-white">YOU</Text>
+              </Surface>
+            )}
+          </Stack>
+          <Stack direction="row" align="center" gap={2} mt={1}>
+            <Text size="xs" color="text-gray-500">{car}</Text>
+            <Text size="xs" color="text-gray-500">•</Text>
+            <Text size="xs" color="text-gray-500">Laps: {laps}</Text>
+            <Text size="xs" color="text-gray-500">•</Text>
+            <Text size="xs" color="text-gray-500">Incidents: {incidents}</Text>
+          </Stack>
+        </Box>
+
+        {/* Times */}
+        <Box style={{ textAlign: 'right', minWidth: '100px' }}>
+          <Text size="sm" font="mono" color="text-white" block>{time}</Text>
+          <Text size="xs" color="text-performance-green" block mt={1}>FL: {fastestLap}</Text>
+        </Box>
+
+        {/* Points */}
+        <Surface variant="muted" rounded="lg" border padding={2} style={{ backgroundColor: 'rgba(245, 158, 11, 0.1)', borderColor: 'rgba(245, 158, 11, 0.2)', textAlign: 'center', minWidth: '3.5rem' }}>
+          <Text size="xs" color="text-gray-500" block>PTS</Text>
+          <Text size="sm" weight="bold" color="text-warning-amber">{points}</Text>
+        </Surface>
+      </Stack>
+    </Surface>
+  );
+}