74 lines
2.9 KiB
TypeScript
74 lines
2.9 KiB
TypeScript
import { RankBadge } from '@/components/leaderboards/RankBadge';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/ui/Table';
|
|
import { Text } from '@/ui/Text';
|
|
import { TeamLogo } from './TeamLogo';
|
|
|
|
interface TeamLeaderboardPanelProps {
|
|
teams: Array<{
|
|
id: string;
|
|
name: string;
|
|
logoUrl?: string;
|
|
rating: number;
|
|
wins: number;
|
|
races: number;
|
|
memberCount: number;
|
|
}>;
|
|
onTeamClick: (id: string) => void;
|
|
}
|
|
|
|
export function TeamLeaderboardPanel({ teams, onTeamClick }: TeamLeaderboardPanelProps) {
|
|
return (
|
|
<Stack border borderColor="border-steel-grey" bg="surface-charcoal/50" overflow="hidden">
|
|
<Table>
|
|
<TableHead className="bg-base-graphite/50">
|
|
<TableRow>
|
|
<TableHeader className="w-16 text-center">Rank</TableHeader>
|
|
<TableHeader>Team</TableHeader>
|
|
<TableHeader className="text-center">Rating</TableHeader>
|
|
<TableHeader className="text-center">Wins</TableHeader>
|
|
<TableHeader className="text-center">Races</TableHeader>
|
|
<TableHeader className="text-center">Members</TableHeader>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{teams.map((team, index) => (
|
|
<TableRow
|
|
key={team.id}
|
|
onClick={() => onTeamClick(team.id)}
|
|
clickable
|
|
className="group hover:bg-primary-blue/5 transition-colors border-b border-border-steel-grey/30 last:border-0"
|
|
>
|
|
<TableCell className="text-center">
|
|
<RankBadge rank={index + 1} />
|
|
</TableCell>
|
|
<TableCell>
|
|
<Stack direction="row" align="center" gap={3}>
|
|
<Stack w="8" h="8" bg="base-graphite" border borderColor="border-steel-grey" display="flex" center overflow="hidden">
|
|
<TeamLogo teamId={team.id} alt={team.name} />
|
|
</Stack>
|
|
<Text weight="bold" size="sm" color="text-white" className="group-hover:text-primary-blue transition-colors">
|
|
{team.name}
|
|
</Text>
|
|
</Stack>
|
|
</TableCell>
|
|
<TableCell className="text-center">
|
|
<Text font="mono" weight="bold" color="text-primary-blue">{team.rating}</Text>
|
|
</TableCell>
|
|
<TableCell className="text-center">
|
|
<Text font="mono" color="text-gray-300">{team.wins}</Text>
|
|
</TableCell>
|
|
<TableCell className="text-center">
|
|
<Text font="mono" color="text-gray-300">{team.races}</Text>
|
|
</TableCell>
|
|
<TableCell className="text-center">
|
|
<Text font="mono" color="text-gray-400" size="xs">{team.memberCount}</Text>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</Stack>
|
|
);
|
|
}
|