website refactor

2026-01-15 17:12:24 +01:00
parent c3b308e960
commit f035cfe7ce
468 changed files with 24378 additions and 17324 deletions
--- a/apps/website/ui/RankingsTable.tsx
+++ b/apps/website/ui/RankingsTable.tsx
@@ -0,0 +1,116 @@
+
+
+import { Box } from '@/ui/Box';
+import { Icon } from '@/ui/Icon';
+import { Image } from '@/ui/Image';
+import { Stack } from '@/ui/Stack';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/ui/Table';
+import { Text } from '@/ui/Text';
+import { Medal } from 'lucide-react';
+
+interface Driver {
+  id: string;
+  name: string;
+  avatarUrl: string;
+  rank: number;
+  nationality: string;
+  skillLevel: string;
+  racesCompleted: number;
+  rating: number;
+  wins: number;
+  medalBg?: string;
+  medalColor?: string;
+}
+
+interface RankingsTableProps {
+  drivers: Driver[];
+  onDriverClick?: (id: string) => void;
+}
+
+export function RankingsTable({ drivers, onDriverClick }: RankingsTableProps) {
+  if (drivers.length === 0) {
+    return (
+      <Box py={16} textAlign="center" bg="bg-iron-gray/30" border borderColor="border-charcoal-outline" rounded="xl">
+        <Text size="4xl" block mb={4}>🔍</Text>
+        <Text color="text-gray-400" block mb={2}>No drivers found</Text>
+        <Text size="sm" color="text-gray-500">There are no drivers in the system yet</Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Box rounded="xl" bg="bg-iron-gray/30" border borderColor="border-charcoal-outline" overflow="hidden">
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableHeader className="text-center w-16">Rank</TableHeader>
+            <TableHeader>Driver</TableHeader>
+            <TableHeader className="text-center">Races</TableHeader>
+            <TableHeader className="text-center">Rating</TableHeader>
+            <TableHeader className="text-center">Wins</TableHeader>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {drivers.map((driver) => (
+            <TableRow
+              key={driver.id}
+              clickable
+              onClick={() => onDriverClick?.(driver.id)}
+            >
+              <TableCell className="text-center">
+                <Box 
+                  display="inline-flex" 
+                  h="9" 
+                  w="9" 
+                  alignItems="center" 
+                  justifyContent="center" 
+                  rounded="full" 
+                  border 
+                  borderColor="border-charcoal-outline"
+                  bg={driver.medalBg}
+                  color={driver.medalColor}
+                  className="text-sm font-bold"
+                >
+                  {driver.rank <= 3 ? <Icon icon={Medal} size={4} /> : driver.rank}
+                </Box>
+              </TableCell>
+
+              <TableCell>
+                <Box display="flex" alignItems="center" gap={3}>
+                  <Box position="relative" w="10" h="10" rounded="full" overflow="hidden" border borderColor="border-charcoal-outline" borderTop={false} borderBottom={false} borderLeft={false} borderRight={false}>
+                    <Image src={driver.avatarUrl} alt={driver.name} width={40} height={40} className="w-full h-full object-cover" />
+                  </Box>
+                  <Box minWidth="0">
+                    <Text weight="semibold" color="text-white" block truncate>
+                      {driver.name}
+                    </Text>
+                    <Stack direction="row" align="center" gap={2} mt={1}>
+                      <Text size="xs" color="text-gray-500">{driver.nationality}</Text>
+                      <Text size="xs" color="text-gray-500">{driver.skillLevel}</Text>
+                    </Stack>
+                  </Box>
+                </Box>
+              </TableCell>
+
+              <TableCell className="text-center">
+                <Text color="text-gray-400">{driver.racesCompleted}</Text>
+              </TableCell>
+
+              <TableCell className="text-center">
+                <Text font="mono" weight="semibold" color="text-white">
+                  {driver.rating.toString()}
+                </Text>
+              </TableCell>
+
+              <TableCell className="text-center">
+                <Text font="mono" weight="semibold" color="text-performance-green">
+                  {driver.wins}
+                </Text>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </Box>
+  );
+}