website refactor

apps/website/components/leaderboards/TeamRankingRow.tsx

@@ -0,0 +1,103 @@
+import React from 'react';
+import { Box } from '@/ui/Box';
+import { Image } from '@/ui/Image';
+import { TableCell, TableRow } from '@/ui/Table';
+import { Text } from '@/ui/Text';
+import { RankMedal } from './RankMedal';
+import { getMediaUrl } from '@/lib/utilities/media';
+
+interface TeamRankingRowProps {
+  id: string;
+  rank: number;
+  name: string;
+  logoUrl?: string;
+  rating: number;
+  wins: number;
+  races: number;
+  memberCount: number;
+  onClick?: () => void;
+}
+
+export function TeamRankingRow({
+  id,
+  rank,
+  name,
+  logoUrl,
+  rating,
+  wins,
+  races,
+  memberCount,
+  onClick,
+}: TeamRankingRowProps) {
+  return (
+    <TableRow
+      clickable={!!onClick}
+      onClick={onClick}
+      group
+    >
+      <TableCell>
+        <Box w="8" display="flex" justifyContent="center">
+          <RankMedal rank={rank} size="md" />
+        </Box>
+      </TableCell>
+
+      <TableCell>
+        <Box display="flex" alignItems="center" gap={3}>
+          <Box 
+            position="relative" 
+            w="10" 
+            h="10" 
+            rounded="lg" 
+            overflow="hidden" 
+            border 
+            borderColor="border-charcoal-outline"
+            bg="bg-graphite-black/50"
+            groupHoverBorderColor="purple-400/50"
+            transition
+          >
+            <Image 
+              src={logoUrl || getMediaUrl('team-logo', id)} 
+              alt={name} 
+              width={40} 
+              height={40} 
+              fullWidth
+              fullHeight
+              objectFit="cover" 
+            />
+          </Box>
+          <Box minWidth="0">
+            <Text 
+              weight="semibold" 
+              color="text-white" 
+              block 
+              truncate
+              groupHoverTextColor="text-purple-400"
+              transition
+            >
+              {name}
+            </Text>
+            <Text size="xs" color="text-gray-500" block mt={0.5}>
+              {memberCount} Members
+            </Text>
+          </Box>
+        </Box>
+      </TableCell>
+
+      <TableCell textAlign="center">
+        <Text font="mono" weight="bold" color="text-purple-400">
+          {rating}
+        </Text>
+      </TableCell>
+
+      <TableCell textAlign="center">
+        <Text font="mono" weight="bold" color="text-performance-green">
+          {wins}
+        </Text>
+      </TableCell>
+
+      <TableCell textAlign="center">
+        <Text color="text-gray-400" font="mono">{races}</Text>
+      </TableCell>
+    </TableRow>
+  );
+}