106 lines
3.4 KiB
TypeScript
106 lines
3.4 KiB
TypeScript
|
|
|
|
import { routes } from '@/lib/routing/RouteConfig';
|
|
import { Box } from '@/ui/Box';
|
|
import { Button } from '@/ui/Button';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { LeaderboardItem } from '@/ui/LeaderboardItem';
|
|
import { LeaderboardList } from '@/ui/LeaderboardList';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
import { Award, ChevronRight } from 'lucide-react';
|
|
|
|
const SKILL_LEVELS = [
|
|
{ id: 'pro', label: 'Pro', color: 'text-yellow-400' },
|
|
{ id: 'advanced', label: 'Advanced', color: 'text-purple-400' },
|
|
{ id: 'intermediate', label: 'Intermediate', color: 'text-primary-blue' },
|
|
{ id: 'beginner', label: 'Beginner', color: 'text-green-400' },
|
|
];
|
|
|
|
const CATEGORIES = [
|
|
{ id: 'beginner', label: 'Beginner', color: 'text-green-400' },
|
|
{ id: 'intermediate', label: 'Intermediate', color: 'text-primary-blue' },
|
|
{ id: 'advanced', label: 'Advanced', color: 'text-purple-400' },
|
|
{ id: 'pro', label: 'Pro', color: 'text-yellow-400' },
|
|
{ id: 'endurance', label: 'Endurance', color: 'text-orange-400' },
|
|
{ id: 'sprint', label: 'Sprint', color: 'text-red-400' },
|
|
];
|
|
|
|
interface LeaderboardPreviewProps {
|
|
drivers: {
|
|
id: string;
|
|
name: string;
|
|
avatarUrl?: string;
|
|
nationality: string;
|
|
rating: number;
|
|
wins: number;
|
|
skillLevel?: string;
|
|
category?: string;
|
|
}[];
|
|
onDriverClick: (id: string) => void;
|
|
onNavigate: (href: string) => void;
|
|
}
|
|
|
|
export function LeaderboardPreview({ drivers, onDriverClick, onNavigate }: LeaderboardPreviewProps) {
|
|
const top5 = drivers.slice(0, 5);
|
|
|
|
return (
|
|
<Stack gap={4} mb={10}>
|
|
<Stack direction="row" align="center" justify="between">
|
|
<Stack direction="row" align="center" gap={3}>
|
|
<Box
|
|
display="flex"
|
|
center
|
|
w="10"
|
|
h="10"
|
|
rounded="xl"
|
|
bg="bg-gradient-to-br from-yellow-400/20 to-amber-600/10"
|
|
border
|
|
borderColor="border-yellow-400/30"
|
|
>
|
|
<Icon icon={Award} size={5} color="rgb(250, 204, 21)" />
|
|
</Box>
|
|
<Box>
|
|
<Heading level={2}>Top Drivers</Heading>
|
|
<Text size="xs" color="text-gray-500">Highest rated competitors</Text>
|
|
</Box>
|
|
</Stack>
|
|
|
|
<Button
|
|
variant="secondary"
|
|
onClick={() => onNavigate(routes.leaderboards.drivers)}
|
|
icon={<Icon icon={ChevronRight} size={4} />}
|
|
>
|
|
Full Rankings
|
|
</Button>
|
|
</Stack>
|
|
|
|
<LeaderboardList>
|
|
{top5.map((driver, index) => {
|
|
const levelConfig = SKILL_LEVELS.find((l) => l.id === driver.skillLevel);
|
|
const categoryConfig = CATEGORIES.find((c) => c.id === driver.category);
|
|
const position = index + 1;
|
|
|
|
return (
|
|
<LeaderboardItem
|
|
key={driver.id}
|
|
position={position}
|
|
name={driver.name}
|
|
avatarUrl={driver.avatarUrl}
|
|
nationality={driver.nationality}
|
|
rating={driver.rating}
|
|
wins={driver.wins}
|
|
skillLevelLabel={levelConfig?.label}
|
|
skillLevelColor={levelConfig?.color}
|
|
categoryLabel={categoryConfig?.label}
|
|
categoryColor={categoryConfig?.color}
|
|
onClick={() => onDriverClick(driver.id)}
|
|
/>
|
|
);
|
|
})}
|
|
</LeaderboardList>
|
|
</Stack>
|
|
);
|
|
}
|