website refactor

apps/website/components/leaderboards/RankingRow.tsx

@@ -0,0 +1,116 @@
+import React from 'react';
+import { Box } from '@/ui/Box';
+import { Image } from '@/ui/Image';
+import { Stack } from '@/ui/Stack';
+import { TableCell, TableRow } from '@/ui/Table';
+import { Text } from '@/ui/Text';
+import { RankMedal } from './RankMedal';
+import { DeltaChip } from './DeltaChip';
+import { RatingDisplay } from '@/lib/display-objects/RatingDisplay';
+
+interface RankingRowProps {
+  id: string;
+  rank: number;
+  rankDelta?: number;
+  name: string;
+  avatarUrl: string;
+  nationality: string;
+  skillLevel: string;
+  racesCompleted: number;
+  rating: number;
+  wins: number;
+  onClick?: () => void;
+}
+
+export function RankingRow({
+  rank,
+  rankDelta,
+  name,
+  avatarUrl,
+  nationality,
+  skillLevel,
+  racesCompleted,
+  rating,
+  wins,
+  onClick,
+}: RankingRowProps) {
+  return (
+    <TableRow
+      clickable={!!onClick}
+      onClick={onClick}
+      group
+    >
+      <TableCell>
+        <Stack direction="row" align="center" gap={4}>
+          <Box w="8" display="flex" justifyContent="center">
+            <RankMedal rank={rank} size="md" />
+          </Box>
+          {rankDelta !== undefined && (
+            <Box w="10">
+              <DeltaChip value={rankDelta} type="rank" />
+            </Box>
+          )}
+        </Stack>
+      </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"
+            groupHoverBorderColor="primary-blue/50"
+            transition
+          >
+            <Image 
+              src={avatarUrl} 
+              alt={name} 
+              width={40} 
+              height={40} 
+              fullWidth
+              fullHeight
+              objectFit="cover" 
+            />
+          </Box>
+          <Box minWidth="0">
+            <Text 
+              weight="semibold" 
+              color="text-white" 
+              block 
+              truncate
+              groupHoverTextColor="text-primary-blue"
+              transition
+            >
+              {name}
+            </Text>
+            <Stack direction="row" align="center" gap={2} mt={0.5}>
+              <Text size="xs" color="text-gray-500">{nationality}</Text>
+              <Box w="1" h="1" rounded="full" bg="bg-gray-700" />
+              <Text size="xs" color="text-gray-500">{skillLevel}</Text>
+            </Stack>
+          </Box>
+        </Box>
+      </TableCell>
+
+      <TableCell textAlign="center">
+        <Text color="text-gray-400" font="mono">{racesCompleted}</Text>
+      </TableCell>
+
+      <TableCell textAlign="center">
+        <Text font="mono" weight="bold" color="text-primary-blue">
+          {RatingDisplay.format(rating)}
+        </Text>
+      </TableCell>
+
+      <TableCell textAlign="center">
+        <Text font="mono" weight="bold" color="text-performance-green">
+          {wins}
+        </Text>
+      </TableCell>
+    </TableRow>
+  );
+}