website refactor

apps/website/components/drivers/DriverTableRow.tsx

@@ -2,9 +2,10 @@
 
 import { RatingBadge } from '@/components/drivers/RatingBadge';
 import { Text } from '@/ui/Text';
-import { Group } from '@/ui/Group';
+import { Box } from '@/ui/Box';
 import { TableRow, TableCell } from '@/ui/Table';
 import { Avatar } from '@/ui/Avatar';
+import { CountryFlag } from '@/ui/CountryFlag';
 
 interface DriverTableRowProps {
   rank: number;
@@ -28,19 +29,19 @@ export function DriverTableRow({
   onClick,
 }: DriverTableRowProps) {
   return (
-    <TableRow onClick={onClick} clickable>
+    <TableRow onClick={onClick}>
       <TableCell textAlign="center">
         <Text 
           size="sm" 
           weight="bold" 
-          font="mono" 
+          mono
           variant={rank <= 3 ? 'warning' : 'low'}
         >
-          {rank}
+          {rank.toString().padStart(2, '0')}
         </Text>
       </TableCell>
       <TableCell>
-        <Group direction="row" align="center" gap={3}>
+        <Box display="flex" alignItems="center" gap={3}>
           <Avatar 
             src={avatarUrl || undefined} 
             alt={name} 
@@ -53,16 +54,22 @@ export function DriverTableRow({
           >
             {name}
           </Text>
-        </Group>
+        </Box>
       </TableCell>
       <TableCell>
-        <Text size="xs" variant="low">{nationality}</Text>
+        <Box display="flex" alignItems="center" gap={2}>
+          <CountryFlag countryCode={nationality} size="sm" />
+          <Text size="xs" variant="low" uppercase>{nationality}</Text>
+        </Box>
       </TableCell>
       <TableCell textAlign="right">
-        <RatingBadge rating={rating} ratingLabel={ratingLabel} size="sm" />
+        <Box display="flex" alignItems="center" justifyContent="end" gap={2}>
+          <Text size="xs" variant="low" mono>{rating}</Text>
+          <RatingBadge rating={rating} ratingLabel={ratingLabel} size="sm" />
+        </Box>
       </TableCell>
       <TableCell textAlign="right">
-        <Text size="sm" weight="semibold" font="mono" variant="success">
+        <Text size="sm" weight="bold" mono variant="success">
           {winsLabel}
         </Text>
       </TableCell>