103 lines
4.3 KiB
TypeScript
103 lines
4.3 KiB
TypeScript
import React from 'react';
|
|
import { Trophy, Medal, Crown } from 'lucide-react';
|
|
import Image from 'next/image';
|
|
import type { DriverLeaderboardItemViewModel } from '@/lib/view-models/DriverLeaderboardItemViewModel';
|
|
|
|
interface DriverTopThreePodiumProps {
|
|
drivers: DriverLeaderboardItemViewModel[];
|
|
onDriverClick: (id: string) => void;
|
|
}
|
|
|
|
export default function DriverTopThreePodium({ drivers, onDriverClick }: DriverTopThreePodiumProps) {
|
|
if (drivers.length < 3) return null;
|
|
|
|
const top3 = drivers.slice(0, 3) as [DriverLeaderboardItemViewModel, DriverLeaderboardItemViewModel, DriverLeaderboardItemViewModel];
|
|
|
|
const podiumOrder: [DriverLeaderboardItemViewModel, DriverLeaderboardItemViewModel, DriverLeaderboardItemViewModel] = [
|
|
top3[1],
|
|
top3[0],
|
|
top3[2],
|
|
]; // 2nd, 1st, 3rd
|
|
const podiumHeights = ['h-32', 'h-40', 'h-24'];
|
|
const podiumColors = [
|
|
'from-gray-400/20 to-gray-500/10 border-gray-400/40',
|
|
'from-yellow-400/20 to-amber-500/10 border-yellow-400/40',
|
|
'from-amber-600/20 to-amber-700/10 border-amber-600/40',
|
|
];
|
|
const crownColors = ['text-gray-300', 'text-yellow-400', 'text-amber-600'];
|
|
const positions = [2, 1, 3];
|
|
|
|
return (
|
|
<div className="mb-10">
|
|
<div className="flex items-end justify-center gap-4 lg:gap-8">
|
|
{podiumOrder.map((driver, index) => {
|
|
const position = positions[index];
|
|
|
|
return (
|
|
<button
|
|
key={driver.id}
|
|
type="button"
|
|
onClick={() => onDriverClick(driver.id)}
|
|
className="flex flex-col items-center group"
|
|
>
|
|
{/* Driver Avatar & Info */}
|
|
<div className="relative mb-4">
|
|
{/* Crown for 1st place */}
|
|
{position === 1 && (
|
|
<div className="absolute -top-6 left-1/2 -translate-x-1/2 animate-bounce">
|
|
<Crown className="w-8 h-8 text-yellow-400 drop-shadow-[0_0_10px_rgba(250,204,21,0.5)]" />
|
|
</div>
|
|
)}
|
|
|
|
{/* Avatar */}
|
|
<div className={`relative ${position === 1 ? 'w-24 h-24 lg:w-28 lg:h-28' : 'w-20 h-20 lg:w-24 lg:h-24'} rounded-full overflow-hidden border-4 ${position === 1 ? 'border-yellow-400 shadow-[0_0_30px_rgba(250,204,21,0.3)]' : position === 2 ? 'border-gray-300' : 'border-amber-600'} group-hover:scale-105 transition-transform`}>
|
|
<Image
|
|
src={driver.avatarUrl}
|
|
alt={driver.name}
|
|
fill
|
|
className="object-cover"
|
|
/>
|
|
</div>
|
|
|
|
{/* Position badge */}
|
|
<div className={`absolute -bottom-2 left-1/2 -translate-x-1/2 w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold bg-gradient-to-br ${podiumColors[index]} border-2 ${crownColors[index]}`}>
|
|
{position}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Driver Name */}
|
|
<p className={`text-white font-semibold ${position === 1 ? 'text-lg' : 'text-base'} group-hover:text-primary-blue transition-colors mb-1`}>
|
|
{driver.name}
|
|
</p>
|
|
|
|
{/* Rating */}
|
|
<p className={`font-mono font-bold ${position === 1 ? 'text-xl text-yellow-400' : 'text-lg text-primary-blue'}`}>
|
|
{driver.rating.toLocaleString()}
|
|
</p>
|
|
|
|
{/* Stats */}
|
|
<div className="flex items-center gap-2 text-xs text-gray-500 mt-1">
|
|
<span className="flex items-center gap-1">
|
|
<Trophy className="w-3 h-3 text-performance-green" />
|
|
{driver.wins}
|
|
</span>
|
|
<span>•</span>
|
|
<span className="flex items-center gap-1">
|
|
<Medal className="w-3 h-3 text-warning-amber" />
|
|
{driver.podiums}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Podium Stand */}
|
|
<div className={`mt-4 w-28 lg:w-36 ${podiumHeights[index]} rounded-t-lg bg-gradient-to-t ${podiumColors[index]} border-t border-x flex items-end justify-center pb-4`}>
|
|
<span className={`text-4xl lg:text-5xl font-black ${crownColors[index]}`}>
|
|
{position}
|
|
</span>
|
|
</div>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
} |