91 lines
2.7 KiB
TypeScript
91 lines
2.7 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { Award, ArrowLeft } from 'lucide-react';
|
|
import { Button } from '@/ui/Button';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Box } from '@/ui/Box';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
import { Container } from '@/ui/Container';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { ModalIcon } from '@/ui/ModalIcon';
|
|
import { TeamPodium } from '@/ui/TeamPodium';
|
|
import { TeamFilter } from '@/ui/TeamFilter';
|
|
import { TeamRankingsTable } from '@/ui/TeamRankingsTable';
|
|
import type { TeamLeaderboardViewData, SkillLevel, SortBy } from '@/lib/view-data/TeamLeaderboardViewData';
|
|
|
|
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,
|
|
filterLevelChange,
|
|
onSortChange,
|
|
onTeamClick,
|
|
onBackToTeams,
|
|
}: TeamLeaderboardTemplateProps) {
|
|
const { searchQuery, filterLevel, sortBy, filteredAndSortedTeams } = viewData;
|
|
|
|
return (
|
|
<Container size="lg" py={8}>
|
|
<Stack gap={8}>
|
|
{/* Header */}
|
|
<Box>
|
|
<Box mb={6}>
|
|
<Button
|
|
variant="secondary"
|
|
onClick={onBackToTeams}
|
|
icon={<Icon icon={ArrowLeft} size={4} />}
|
|
>
|
|
Back to Teams
|
|
</Button>
|
|
</Box>
|
|
|
|
<Stack direction="row" align="center" gap={4}>
|
|
<ModalIcon
|
|
icon={Award}
|
|
color="text-yellow-400"
|
|
bgColor="bg-yellow-400/10"
|
|
borderColor="border-yellow-400/30"
|
|
/>
|
|
<Box>
|
|
<Heading level={1}>Team Leaderboard</Heading>
|
|
<Text color="text-gray-400" block mt={1}>Rankings of all teams by performance metrics</Text>
|
|
</Box>
|
|
</Stack>
|
|
</Box>
|
|
|
|
{/* Filters and Search */}
|
|
<TeamFilter
|
|
searchQuery={searchQuery}
|
|
onSearchChange={onSearchChange}
|
|
filterLevel={filterLevel}
|
|
onFilterLevelChange={filterLevelChange}
|
|
sortBy={sortBy}
|
|
onSortChange={onSortChange}
|
|
/>
|
|
|
|
{/* Podium for Top 3 */}
|
|
{sortBy === 'rating' && filterLevel === 'all' && !searchQuery && filteredAndSortedTeams.length >= 3 && (
|
|
<TeamPodium teams={filteredAndSortedTeams} onClick={onTeamClick} />
|
|
)}
|
|
|
|
{/* Leaderboard Table */}
|
|
<TeamRankingsTable
|
|
teams={filteredAndSortedTeams}
|
|
sortBy={sortBy}
|
|
onTeamClick={onTeamClick}
|
|
/>
|
|
</Stack>
|
|
</Container>
|
|
);
|
|
}
|