73 lines
2.2 KiB
TypeScript
73 lines
2.2 KiB
TypeScript
import Card from '@/components/ui/Card';
|
|
import RankBadge from '@/components/drivers/RankBadge';
|
|
|
|
export interface DriverCardProps {
|
|
id: string;
|
|
name: string;
|
|
rating: number;
|
|
skillLevel: 'beginner' | 'intermediate' | 'advanced' | 'pro';
|
|
nationality: string;
|
|
racesCompleted: number;
|
|
wins: number;
|
|
podiums: number;
|
|
rank: number;
|
|
onClick?: () => void;
|
|
}
|
|
|
|
export default function DriverCard(props: DriverCardProps) {
|
|
const {
|
|
name,
|
|
rating,
|
|
nationality,
|
|
racesCompleted,
|
|
wins,
|
|
podiums,
|
|
rank,
|
|
onClick,
|
|
} = props;
|
|
|
|
return (
|
|
<Card
|
|
className="hover:border-charcoal-outline/60 transition-colors cursor-pointer"
|
|
onClick={onClick}
|
|
>
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-4 flex-1">
|
|
<RankBadge rank={rank} size="lg" />
|
|
|
|
<div className="w-16 h-16 rounded-full bg-primary-blue/20 flex items-center justify-center text-2xl font-bold text-white">
|
|
{name.charAt(0)}
|
|
</div>
|
|
|
|
<div className="flex-1">
|
|
<h3 className="text-xl font-semibold text-white mb-1">{name}</h3>
|
|
<p className="text-sm text-gray-400">
|
|
{nationality} • {racesCompleted} races
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-8 text-center">
|
|
<div>
|
|
<div className="text-2xl font-bold text-primary-blue">{rating}</div>
|
|
<div className="text-xs text-gray-400">Rating</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-2xl font-bold text-green-400">{wins}</div>
|
|
<div className="text-xs text-gray-400">Wins</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-2xl font-bold text-warning-amber">{podiums}</div>
|
|
<div className="text-xs text-gray-400">Podiums</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-sm text-gray-400">
|
|
{racesCompleted > 0 ? ((wins / racesCompleted) * 100).toFixed(0) : '0'}%
|
|
</div>
|
|
<div className="text-xs text-gray-500">Win Rate</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
);
|
|
} |