120 lines
3.9 KiB
TypeScript
120 lines
3.9 KiB
TypeScript
'use client';
|
|
|
|
import React, { useMemo } 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 { Surface } from '@/ui/Surface';
|
|
import TopThreePodium from '@/components/teams/TopThreePodium';
|
|
import type { TeamSummaryViewModel } from '@/lib/view-models/TeamSummaryViewModel';
|
|
import TeamRankingsFilter from '@/components/TeamRankingsFilter';
|
|
import { TeamRankingsTable } from '@/components/teams/TeamRankingsTable';
|
|
|
|
type SkillLevel = 'pro' | 'advanced' | 'intermediate' | 'beginner';
|
|
type SortBy = 'rating' | 'wins' | 'winRate' | 'races';
|
|
|
|
interface TeamLeaderboardTemplateProps {
|
|
teams: TeamSummaryViewModel[];
|
|
searchQuery: string;
|
|
filterLevel: SkillLevel | 'all';
|
|
sortBy: SortBy;
|
|
onSearchChange: (query: string) => void;
|
|
onFilterLevelChange: (level: SkillLevel | 'all') => void;
|
|
onSortChange: (sort: SortBy) => void;
|
|
onTeamClick: (id: string) => void;
|
|
onBackToTeams: () => void;
|
|
}
|
|
|
|
export default function TeamLeaderboardTemplate({
|
|
teams,
|
|
searchQuery,
|
|
filterLevel,
|
|
sortBy,
|
|
onSearchChange,
|
|
onFilterLevelChange,
|
|
onSortChange,
|
|
onTeamClick,
|
|
onBackToTeams,
|
|
}: TeamLeaderboardTemplateProps) {
|
|
// Filter and sort teams
|
|
const filteredAndSortedTeams = useMemo(() => {
|
|
return teams
|
|
.filter((team) => {
|
|
if (searchQuery) {
|
|
const query = searchQuery.toLowerCase();
|
|
if (!team.name.toLowerCase().includes(query) && !(team.description ?? '').toLowerCase().includes(query)) {
|
|
return false;
|
|
}
|
|
}
|
|
if (filterLevel !== 'all' && team.performanceLevel !== filterLevel) {
|
|
return false;
|
|
}
|
|
return true;
|
|
})
|
|
.sort((a, b) => {
|
|
switch (sortBy) {
|
|
case 'rating': return 0; // Placeholder
|
|
case 'wins': return (b.totalWins || 0) - (a.totalWins || 0);
|
|
case 'races': return (b.totalRaces || 0) - (a.totalRaces || 0);
|
|
default: return 0;
|
|
}
|
|
});
|
|
}, [teams, searchQuery, filterLevel, sortBy]);
|
|
|
|
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}>
|
|
<Surface variant="muted" rounded="xl" padding={3} style={{ background: 'linear-gradient(to bottom right, rgba(250, 204, 21, 0.2), rgba(217, 119, 6, 0.1))', border: '1px solid rgba(250, 204, 21, 0.3)' }}>
|
|
<Icon icon={Award} size={7} color="#facc15" />
|
|
</Surface>
|
|
<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 */}
|
|
<TeamRankingsFilter
|
|
searchQuery={searchQuery}
|
|
onSearchChange={onSearchChange}
|
|
filterLevel={filterLevel}
|
|
onFilterLevelChange={onFilterLevelChange}
|
|
sortBy={sortBy}
|
|
onSortChange={onSortChange}
|
|
/>
|
|
|
|
{/* Podium for Top 3 */}
|
|
{sortBy === 'rating' && filterLevel === 'all' && !searchQuery && filteredAndSortedTeams.length >= 3 && (
|
|
<TopThreePodium teams={filteredAndSortedTeams} onClick={onTeamClick} />
|
|
)}
|
|
|
|
{/* Leaderboard Table */}
|
|
<TeamRankingsTable
|
|
teams={filteredAndSortedTeams}
|
|
sortBy={sortBy}
|
|
onTeamClick={onTeamClick}
|
|
/>
|
|
</Stack>
|
|
</Container>
|
|
);
|
|
}
|