68 lines
2.0 KiB
TypeScript
68 lines
2.0 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { Trophy } from 'lucide-react';
|
|
import { Container } from '@/ui/Container';
|
|
import type { DriverRankingsViewData } from '@/lib/view-data/DriverRankingsViewData';
|
|
import { LeaderboardHeader } from '@/components/leaderboards/LeaderboardHeader';
|
|
import { LeaderboardFiltersBar } from '@/components/leaderboards/LeaderboardFiltersBar';
|
|
import { LeaderboardPodium } from '@/components/leaderboards/LeaderboardPodium';
|
|
import { LeaderboardTable } from '@/components/leaderboards/LeaderboardTable';
|
|
|
|
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}>
|
|
<LeaderboardHeader
|
|
title="Driver Leaderboard"
|
|
description="Full rankings of all drivers by performance metrics"
|
|
icon={Trophy}
|
|
onBack={onBackToLeaderboards}
|
|
backLabel="Back to Leaderboards"
|
|
/>
|
|
|
|
{/* Top 3 Podium */}
|
|
{viewData.podium.length > 0 && !searchQuery && (
|
|
<LeaderboardPodium
|
|
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 */}
|
|
<LeaderboardTable
|
|
drivers={viewData.drivers.map(d => ({
|
|
...d,
|
|
rating: Number(d.rating),
|
|
wins: Number(d.wins)
|
|
}))}
|
|
onDriverClick={onDriverClick}
|
|
/>
|
|
</Container>
|
|
);
|
|
}
|