82 lines
2.5 KiB
TypeScript
82 lines
2.5 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { Trophy, 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 type { DriverRankingsViewData } from '@/lib/view-data/DriverRankingsViewData';
|
|
import { RankingsPodium } from '@/ui/RankingsPodium';
|
|
import { RankingsTable } from '@/ui/RankingsTable';
|
|
|
|
interface DriverRankingsTemplateProps {
|
|
viewData: DriverRankingsViewData;
|
|
onDriverClick?: (id: string) => void;
|
|
onBackToLeaderboards?: () => void;
|
|
}
|
|
|
|
export function DriverRankingsTemplate({
|
|
viewData,
|
|
onDriverClick,
|
|
onBackToLeaderboards,
|
|
}: DriverRankingsTemplateProps): React.ReactElement {
|
|
return (
|
|
<Container size="lg" py={8}>
|
|
<Stack gap={8}>
|
|
{/* Header */}
|
|
<Box>
|
|
{onBackToLeaderboards && (
|
|
<Box mb={6}>
|
|
<Button
|
|
variant="secondary"
|
|
onClick={onBackToLeaderboards}
|
|
icon={<Icon icon={ArrowLeft} size={4} />}
|
|
>
|
|
Back to Leaderboards
|
|
</Button>
|
|
</Box>
|
|
)}
|
|
|
|
<Stack direction="row" align="center" gap={4}>
|
|
<Surface variant="muted" rounded="xl" padding={3} bg="linear-gradient(to bottom right, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.05))" border borderColor="border-blue-500/20">
|
|
<Icon icon={Trophy} size={7} color="#3b82f6" />
|
|
</Surface>
|
|
<Box>
|
|
<Heading level={1}>Driver Leaderboard</Heading>
|
|
<Text color="text-gray-400" block mt={1}>Full rankings of all drivers by performance metrics</Text>
|
|
</Box>
|
|
</Stack>
|
|
</Box>
|
|
|
|
{/* Top 3 Podium */}
|
|
{viewData.podium.length > 0 && (
|
|
<RankingsPodium
|
|
podium={viewData.podium.map(d => ({
|
|
...d,
|
|
rating: Number(d.rating),
|
|
wins: Number(d.wins),
|
|
podiums: Number(d.podiums)
|
|
}))}
|
|
onDriverClick={onDriverClick}
|
|
/>
|
|
)}
|
|
|
|
{/* Leaderboard Table */}
|
|
<RankingsTable
|
|
drivers={viewData.drivers.map(d => ({
|
|
...d,
|
|
rating: Number(d.rating),
|
|
wins: Number(d.wins)
|
|
}))}
|
|
onDriverClick={onDriverClick}
|
|
/>
|
|
</Stack>
|
|
</Container>
|
|
);
|
|
}
|