website refactor

apps/website/ui/TeamRankingsTable.tsx

@@ -0,0 +1,104 @@
+import React from 'react';
+import { Users } from 'lucide-react';
+import { Box } from './Box';
+import { Stack } from './Stack';
+import { Text } from './Text';
+import { Icon } from './Icon';
+import { Card } from './Card';
+import { Table, TableHead, TableBody, TableRow, TableHeader, TableCell } from './Table';
+import { RankBadge } from './RankBadge';
+import { TeamIdentity } from './TeamIdentity';
+import { getMediaUrl } from '@/lib/utilities/media';
+
+interface Team {
+  id: string;
+  name: string;
+  logoUrl?: string;
+  performanceLevel: string;
+  category?: string;
+  region?: string;
+  languages?: string[];
+  isRecruiting?: boolean;
+  memberCount: number;
+  totalWins: number;
+  totalRaces: number;
+}
+
+interface TeamRankingsTableProps {
+  teams: Team[];
+  sortBy: string;
+  onTeamClick: (id: string) => void;
+}
+
+export function TeamRankingsTable({ teams, sortBy, onTeamClick }: TeamRankingsTableProps) {
+  return (
+    <Card p={0} overflow="hidden">
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableHeader>
+              <Text size="xs" weight="medium" color="text-gray-500" align="center" block>Rank</Text>
+            </TableHeader>
+            <TableHeader>
+              <Text size="xs" weight="medium" color="text-gray-500" block>Team</Text>
+            </TableHeader>
+            <TableHeader>
+              <Box display={{ base: 'none', lg: 'block' }}>
+                <Text size="xs" weight="medium" color="text-gray-500" align="center" block>Members</Text>
+              </Box>
+            </TableHeader>
+            <TableHeader>
+              <Text size="xs" weight="medium" color="text-gray-500" align="center" block>Rating</Text>
+            </TableHeader>
+            <TableHeader>
+              <Text size="xs" weight="medium" color="text-gray-500" align="center" block>Wins</Text>
+            </TableHeader>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {teams.map((team, index) => (
+            <TableRow 
+              key={team.id} 
+              onClick={() => onTeamClick(team.id)}
+              clickable
+            >
+              <TableCell>
+                <RankBadge rank={index + 1} />
+              </TableCell>
+              <TableCell>
+                <TeamIdentity 
+                  name={team.name}
+                  logoUrl={team.logoUrl || getMediaUrl('team-logo', team.id)}
+                  performanceLevel={team.performanceLevel}
+                  category={team.category}
+                />
+              </TableCell>
+              <TableCell>
+                <Box display={{ base: 'none', lg: 'flex' }} alignItems="center" justifyContent="center">
+                  <Stack direction="row" align="center" gap={1.5}>
+                    <Icon icon={Users} size={3.5} color="text-gray-500" />
+                    <Text size="sm" color="text-gray-400">{team.memberCount}</Text>
+                  </Stack>
+                </Box>
+              </TableCell>
+              <TableCell>
+                <Box display="flex" center>
+                  <Text font="mono" weight="semibold" color={sortBy === 'rating' ? 'text-primary-blue' : 'text-white'}>
+                    0
+                  </Text>
+                </Box>
+              </TableCell>
+              <TableCell>
+                <Box display="flex" center>
+                  <Text font="mono" weight="semibold" color={sortBy === 'wins' ? 'text-primary-blue' : 'text-white'}>
+                    {team.totalWins}
+                  </Text>
+                </Box>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </Card>
+  );
+}