96 lines
3.9 KiB
TypeScript
96 lines
3.9 KiB
TypeScript
import React from 'react';
|
|
import { Trophy, Crown, Flag, ChevronRight } from 'lucide-react';
|
|
import Button from '@/ui/Button';
|
|
import Image from 'next/image';
|
|
import { SkillLevelDisplay } from '@/lib/display-objects/SkillLevelDisplay';
|
|
import { MedalDisplay } from '@/lib/display-objects/MedalDisplay';
|
|
import { RatingDisplay } from '@/lib/display-objects/RatingDisplay';
|
|
|
|
interface DriverLeaderboardPreviewProps {
|
|
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({ drivers, onDriverClick, onNavigateToDrivers }: DriverLeaderboardPreviewProps) {
|
|
const top10 = drivers; // Already sliced in builder
|
|
|
|
return (
|
|
<div className="rounded-xl bg-iron-gray/30 border border-charcoal-outline overflow-hidden">
|
|
<div className="flex items-center justify-between px-5 py-4 border-b border-charcoal-outline bg-iron-gray/20">
|
|
<div className="flex items-center gap-3">
|
|
<div className="flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-primary-blue/20 to-primary-blue/5 border border-primary-blue/20">
|
|
<Trophy className="w-5 h-5 text-primary-blue" />
|
|
</div>
|
|
<div>
|
|
<h3 className="text-lg font-semibold text-white">Driver Rankings</h3>
|
|
<p className="text-xs text-gray-500">Top performers across all leagues</p>
|
|
</div>
|
|
</div>
|
|
<Button
|
|
variant="secondary"
|
|
onClick={onNavigateToDrivers}
|
|
className="flex items-center gap-2 text-sm"
|
|
>
|
|
View All
|
|
<ChevronRight className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="divide-y divide-charcoal-outline/50">
|
|
{top10.map((driver, index) => {
|
|
const position = index + 1;
|
|
|
|
return (
|
|
<button
|
|
key={driver.id}
|
|
type="button"
|
|
onClick={() => onDriverClick(driver.id)}
|
|
className="flex items-center gap-4 px-5 py-3 w-full text-left hover:bg-iron-gray/30 transition-colors group"
|
|
>
|
|
<div className={`flex h-8 w-8 items-center justify-center rounded-full text-xs font-bold border ${MedalDisplay.getBg(position)} ${MedalDisplay.getColor(position)}`}>
|
|
{position <= 3 ? <Crown className="w-3.5 h-3.5" /> : position}
|
|
</div>
|
|
|
|
<div className="relative w-9 h-9 rounded-full overflow-hidden border-2 border-charcoal-outline">
|
|
<Image src={driver.avatarUrl} alt={driver.name} fill className="object-cover" />
|
|
</div>
|
|
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-white font-medium truncate group-hover:text-primary-blue transition-colors">
|
|
{driver.name}
|
|
</p>
|
|
<div className="flex items-center gap-2 text-xs text-gray-500">
|
|
<Flag className="w-3 h-3" />
|
|
{driver.nationality}
|
|
<span className={SkillLevelDisplay.getColor(driver.skillLevel)}>{SkillLevelDisplay.getLabel(driver.skillLevel)}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-4 text-sm">
|
|
<div className="text-center">
|
|
<p className="text-primary-blue font-mono font-semibold">{RatingDisplay.format(driver.rating)}</p>
|
|
<p className="text-[10px] text-gray-500">Rating</p>
|
|
</div>
|
|
<div className="text-center">
|
|
<p className="text-performance-green font-mono font-semibold">{driver.wins}</p>
|
|
<p className="text-[10px] text-gray-500">Wins</p>
|
|
</div>
|
|
</div>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
} |