105 lines
3.5 KiB
TypeScript
105 lines
3.5 KiB
TypeScript
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>
|
|
);
|
|
}
|