117 lines
4.8 KiB
TypeScript
117 lines
4.8 KiB
TypeScript
'use client';
|
|
|
|
import { LeaderboardFiltersBar } from '@/components/leaderboards/LeaderboardFiltersBar';
|
|
import type { SkillLevel, SortBy, TeamLeaderboardViewData } from '@/lib/view-data/TeamLeaderboardViewData';
|
|
import { Button } from '@/ui/Button';
|
|
import { Container } from '@/ui/Container';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { Box } from '@/ui/primitives/Box';
|
|
import { Stack } from '@/ui/primitives/Stack';
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/ui/Table';
|
|
import { Text } from '@/ui/Text';
|
|
import { Award, ChevronLeft } from 'lucide-react';
|
|
|
|
interface TeamLeaderboardTemplateProps {
|
|
viewData: TeamLeaderboardViewData;
|
|
onSearchChange: (query: string) => void;
|
|
filterLevelChange: (level: SkillLevel | 'all') => void;
|
|
onSortChange: (sort: SortBy) => void;
|
|
onTeamClick: (id: string) => void;
|
|
onBackToTeams: () => void;
|
|
}
|
|
|
|
export function TeamLeaderboardTemplate({
|
|
viewData,
|
|
onSearchChange,
|
|
onTeamClick,
|
|
onBackToTeams,
|
|
}: TeamLeaderboardTemplateProps) {
|
|
const { searchQuery, filteredAndSortedTeams } = viewData;
|
|
|
|
return (
|
|
<Box bg="base-black" minH="screen">
|
|
<Container size="lg" py={12}>
|
|
<Stack gap={8}>
|
|
{/* Header */}
|
|
<Stack direction="row" align="center" justify="between">
|
|
<Stack direction="row" align="center" gap={4}>
|
|
<Button variant="secondary" size="sm" onClick={onBackToTeams} icon={<Icon icon={ChevronLeft} size={4} />}>
|
|
Back
|
|
</Button>
|
|
<Box>
|
|
<Heading level={1} weight="bold">Global Standings</Heading>
|
|
<Text color="text-gray-500" size="sm" font="mono" uppercase letterSpacing="widest">Team Performance Index</Text>
|
|
</Box>
|
|
</Stack>
|
|
<Icon icon={Award} size={8} color="warning-amber" />
|
|
</Stack>
|
|
|
|
<LeaderboardFiltersBar
|
|
searchQuery={searchQuery}
|
|
onSearchChange={onSearchChange}
|
|
placeholder="Search teams..."
|
|
/>
|
|
|
|
<Box border borderColor="outline-steel" bg="surface-charcoal/30">
|
|
<Table>
|
|
<TableHead>
|
|
<TableRow>
|
|
<TableHeader w="20">Rank</TableHeader>
|
|
<TableHeader>Team</TableHeader>
|
|
<TableHeader textAlign="center">Personnel</TableHeader>
|
|
<TableHeader textAlign="center">Races</TableHeader>
|
|
<TableHeader textAlign="right">Rating</TableHeader>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{filteredAndSortedTeams.length > 0 ? (
|
|
filteredAndSortedTeams.map((team, index) => (
|
|
<TableRow
|
|
key={team.id}
|
|
onClick={() => onTeamClick(team.id)}
|
|
cursor="pointer"
|
|
hoverBg="surface-charcoal/50"
|
|
>
|
|
<TableCell>
|
|
<Text font="mono" weight="bold" color={index < 3 ? 'warning-amber' : 'text-gray-500'}>
|
|
#{index + 1}
|
|
</Text>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Stack direction="row" align="center" gap={3}>
|
|
<Box w="8" h="8" bg="base-black" border borderColor="outline-steel" display="flex" center>
|
|
<Text size="xs" weight="bold" color="primary-accent">{team.name.substring(0, 2).toUpperCase()}</Text>
|
|
</Box>
|
|
<Text weight="bold" size="sm" color="text-white">{team.name}</Text>
|
|
</Stack>
|
|
</TableCell>
|
|
<TableCell textAlign="center">
|
|
<Text size="xs" color="text-gray-400" font="mono">{team.memberCount}</Text>
|
|
</TableCell>
|
|
<TableCell textAlign="center">
|
|
<Text size="xs" color="text-gray-400" font="mono">{team.totalRaces}</Text>
|
|
</TableCell>
|
|
<TableCell textAlign="right">
|
|
<Text font="mono" weight="bold" color="primary-accent">1450</Text>
|
|
</TableCell>
|
|
</TableRow>
|
|
))
|
|
) : (
|
|
<TableRow>
|
|
<TableCell colSpan={5} textAlign="center" py={12}>
|
|
<Text color="text-gray-600" font="mono" size="xs" uppercase letterSpacing="widest">
|
|
No teams found matching criteria
|
|
</Text>
|
|
</TableCell>
|
|
</TableRow>
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
</Box>
|
|
</Stack>
|
|
</Container>
|
|
</Box>
|
|
);
|
|
}
|