website refactor

apps/website/ui/TeamLadderRow.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import { TableRow, TableCell } from './Table';
+import { Image } from './Image';
+import { Box } from './Box';
+import { Text } from './Text';
+
+export interface TeamLadderRowProps {
+  rank: number;
+  teamId: string;
+  teamName: string;
+  logoUrl: string;
+  memberCount: number;
+  teamRating: number | null;
+  totalWins: number;
+  totalRaces: number;
+  onClick: () => void;
+}
+
+export function TeamLadderRow({
+  rank,
+  teamName,
+  logoUrl,
+  memberCount,
+  teamRating,
+  totalWins,
+  totalRaces,
+  onClick,
+}: TeamLadderRowProps) {
+  return (
+    <TableRow
+      onClick={onClick}
+      clickable
+    >
+      <TableCell>
+        <Text size="sm" color="text-gray-300" weight="semibold">#{rank}</Text>
+      </TableCell>
+      <TableCell>
+        <Box display="flex" alignItems="center" gap={3}>
+          <Box w="8" h="8" rounded="md" overflow="hidden" bg="bg-deep-graphite" flexShrink={0}>
+            <Image
+              src={logoUrl}
+              alt={teamName}
+              width={32}
+              height={32}
+              objectFit="cover"
+            />
+          </Box>
+          <Box display="flex" flexDirection="col">
+            <Text size="sm" weight="semibold" color="text-white" truncate block>
+              {teamName}
+            </Text>
+          </Box>
+        </Box>
+      </TableCell>
+      <TableCell>
+        <Text color="text-primary-blue" weight="semibold">
+          {teamRating !== null ? Math.round(teamRating) : '—'}
+        </Text>
+      </TableCell>
+      <TableCell>
+        <Text color="text-performance-green" weight="semibold">{totalWins}</Text>
+      </TableCell>
+      <TableCell>
+        <Text color="text-white">{totalRaces}</Text>
+      </TableCell>
+      <TableCell>
+        <Text color="text-gray-300">
+          {memberCount} {memberCount === 1 ? 'member' : 'members'}
+        </Text>
+      </TableCell>
+    </TableRow>
+  );
+}