79 lines
2.2 KiB
TypeScript
79 lines
2.2 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { Trophy, ChevronLeft } from 'lucide-react';
|
|
import { Container } from '@/ui/Container';
|
|
import { PageHeader } from '@/ui/PageHeader';
|
|
import { RankingsPodium } from '@/components/leaderboards/RankingsPodium';
|
|
import { RankingsTable } from '@/components/leaderboards/RankingsTable';
|
|
import { Button } from '@/ui/Button';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { LeaderboardFiltersBar } from '@/components/leaderboards/LeaderboardFiltersBar';
|
|
import type { DriverRankingsViewData } from '@/lib/view-data/DriverRankingsViewData';
|
|
|
|
interface DriverRankingsTemplateProps {
|
|
viewData: DriverRankingsViewData;
|
|
searchQuery: string;
|
|
onSearchChange: (query: string) => void;
|
|
onDriverClick?: (id: string) => void;
|
|
onBackToLeaderboards?: () => void;
|
|
}
|
|
|
|
export function DriverRankingsTemplate({
|
|
viewData,
|
|
searchQuery,
|
|
onSearchChange,
|
|
onDriverClick,
|
|
onBackToLeaderboards,
|
|
}: DriverRankingsTemplateProps): React.ReactElement {
|
|
return (
|
|
<Container size="lg" py={8}>
|
|
<PageHeader
|
|
title="Driver Leaderboard"
|
|
description="Full rankings of all drivers by performance metrics"
|
|
icon={Trophy}
|
|
action={
|
|
onBackToLeaderboards && (
|
|
<Button
|
|
variant="secondary"
|
|
onClick={onBackToLeaderboards}
|
|
icon={<Icon icon={ChevronLeft} size={4} />}
|
|
>
|
|
Back to Leaderboards
|
|
</Button>
|
|
)
|
|
}
|
|
/>
|
|
|
|
{/* Top 3 Podium */}
|
|
{viewData.podium.length > 0 && !searchQuery && (
|
|
<RankingsPodium
|
|
podium={viewData.podium.map(d => ({
|
|
...d,
|
|
rating: Number(d.rating),
|
|
wins: Number(d.wins),
|
|
podiums: Number(d.podiums)
|
|
}))}
|
|
onDriverClick={onDriverClick}
|
|
/>
|
|
)}
|
|
|
|
<LeaderboardFiltersBar
|
|
searchQuery={searchQuery}
|
|
onSearchChange={onSearchChange}
|
|
placeholder="Search drivers..."
|
|
/>
|
|
|
|
{/* Leaderboard Table */}
|
|
<RankingsTable
|
|
drivers={viewData.drivers.map(d => ({
|
|
...d,
|
|
rating: Number(d.rating),
|
|
wins: Number(d.wins)
|
|
}))}
|
|
onDriverClick={onDriverClick}
|
|
/>
|
|
</Container>
|
|
);
|
|
}
|