64 lines
1.8 KiB
TypeScript
64 lines
1.8 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { Users, ChevronLeft } from 'lucide-react';
|
|
import { Container } from '@/ui/Container';
|
|
import { PageHeader } from '@/ui/PageHeader';
|
|
import { TeamLeaderboardTable } from '@/components/leaderboards/TeamLeaderboardTable';
|
|
import { Button } from '@/ui/Button';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { LeaderboardFiltersBar } from '@/components/leaderboards/LeaderboardFiltersBar';
|
|
import type { TeamRankingsViewData } from '@/lib/view-data/TeamRankingsViewData';
|
|
|
|
interface TeamRankingsTemplateProps {
|
|
viewData: TeamRankingsViewData;
|
|
searchQuery: string;
|
|
onSearchChange: (query: string) => void;
|
|
onTeamClick?: (id: string) => void;
|
|
onBackToLeaderboards?: () => void;
|
|
}
|
|
|
|
export function TeamRankingsTemplate({
|
|
viewData,
|
|
searchQuery,
|
|
onSearchChange,
|
|
onTeamClick,
|
|
onBackToLeaderboards,
|
|
}: TeamRankingsTemplateProps): React.ReactElement {
|
|
return (
|
|
<Container size="lg" spacing="md">
|
|
<PageHeader
|
|
title="Team Leaderboard"
|
|
description="Global rankings of all teams based on performance and consistency"
|
|
icon={Users}
|
|
action={
|
|
onBackToLeaderboards && (
|
|
<Button
|
|
variant="secondary"
|
|
onClick={onBackToLeaderboards}
|
|
icon={<Icon icon={ChevronLeft} size={4} />}
|
|
>
|
|
Back to Leaderboards
|
|
</Button>
|
|
)
|
|
}
|
|
/>
|
|
|
|
<LeaderboardFiltersBar
|
|
searchQuery={searchQuery}
|
|
onSearchChange={onSearchChange}
|
|
placeholder="Search teams..."
|
|
/>
|
|
|
|
<TeamLeaderboardTable
|
|
teams={viewData.teams.map(t => ({
|
|
...t,
|
|
totalRaces: t.totalRaces || 0,
|
|
rating: t.rating || 0
|
|
}))}
|
|
onTeamClick={onTeamClick}
|
|
/>
|
|
</Container>
|
|
);
|
|
}
|