106 lines
3.8 KiB
TypeScript
106 lines
3.8 KiB
TypeScript
import { RankBadge } from '@/components/leaderboards/RankBadge';
|
|
import { RatingDisplay } from '@/lib/display-objects/RatingDisplay';
|
|
import { SkillLevelDisplay } from '@/lib/display-objects/SkillLevelDisplay';
|
|
import { Avatar } from '@/ui/Avatar';
|
|
import { LeaderboardList } from '@/ui/LeaderboardList';
|
|
import { LeaderboardPreviewShell } from '@/ui/LeaderboardPreviewShell';
|
|
import { LeaderboardRow } from '@/ui/LeaderboardRow';
|
|
import { Group } from '@/ui/Group';
|
|
import { Text } from '@/ui/Text';
|
|
import { Trophy } from 'lucide-react';
|
|
|
|
interface DriverLeaderboardPreviewProps {
|
|
title?: string;
|
|
subtitle?: string;
|
|
drivers: {
|
|
id: string;
|
|
name: string;
|
|
rating: number;
|
|
skillLevel: string;
|
|
nationality: string;
|
|
wins: number;
|
|
rank: number;
|
|
avatarUrl: string;
|
|
position: number;
|
|
}[];
|
|
onDriverClick: (id: string) => void;
|
|
onNavigateToDrivers: () => void;
|
|
}
|
|
|
|
export function DriverLeaderboardPreview({
|
|
title = "Driver Rankings",
|
|
subtitle = "Top Performers",
|
|
drivers,
|
|
onDriverClick,
|
|
onNavigateToDrivers
|
|
}: DriverLeaderboardPreviewProps) {
|
|
const top10 = drivers; // Already sliced in builder
|
|
|
|
return (
|
|
<LeaderboardPreviewShell
|
|
title={title}
|
|
subtitle={subtitle}
|
|
onViewFull={onNavigateToDrivers}
|
|
icon={Trophy}
|
|
iconColor="var(--ui-color-intent-primary)"
|
|
iconBgGradient="linear-gradient(to bottom right, rgba(25, 140, 255, 0.2), rgba(25, 140, 255, 0.1))"
|
|
viewFullLabel="View All"
|
|
>
|
|
<LeaderboardList>
|
|
{top10.map((driver, index) => {
|
|
const position = index + 1;
|
|
|
|
return (
|
|
<LeaderboardRow
|
|
key={driver.id}
|
|
onClick={() => onDriverClick(driver.id)}
|
|
rank={<RankBadge rank={position} />}
|
|
identity={
|
|
<Group gap={4}>
|
|
<Avatar src={driver.avatarUrl} alt={driver.name} size="sm" />
|
|
<Group direction="column" align="start" gap={0}>
|
|
<Text
|
|
weight="bold"
|
|
variant="high"
|
|
truncate
|
|
block
|
|
>
|
|
{driver.name}
|
|
</Text>
|
|
<Group gap={2}>
|
|
<Text size="xs" variant="low" uppercase weight="bold" letterSpacing="wider">{driver.nationality}</Text>
|
|
<Text size="xs" weight="bold" color={SkillLevelDisplay.getColor(driver.skillLevel)} uppercase letterSpacing="wider">
|
|
{SkillLevelDisplay.getLabel(driver.skillLevel)}
|
|
</Text>
|
|
</Group>
|
|
</Group>
|
|
</Group>
|
|
}
|
|
stats={
|
|
<Group gap={8}>
|
|
<Group direction="column" align="end" gap={0}>
|
|
<Text variant="primary" font="mono" weight="bold" block size="md" align="right">
|
|
{RatingDisplay.format(driver.rating)}
|
|
</Text>
|
|
<Text size="xs" variant="low" block uppercase letterSpacing="widest" weight="bold" fontSize="9px" align="right">
|
|
Rating
|
|
</Text>
|
|
</Group>
|
|
<Group direction="column" align="end" gap={0}>
|
|
<Text variant="success" font="mono" weight="bold" block size="md" align="right">
|
|
{driver.wins}
|
|
</Text>
|
|
<Text size="xs" variant="low" block uppercase letterSpacing="widest" weight="bold" fontSize="9px" align="right">
|
|
Wins
|
|
</Text>
|
|
</Group>
|
|
</Group>
|
|
}
|
|
/>
|
|
);
|
|
})}
|
|
</LeaderboardList>
|
|
</LeaderboardPreviewShell>
|
|
);
|
|
}
|