99 lines
3.0 KiB
TypeScript
99 lines
3.0 KiB
TypeScript
'use client';
|
|
|
|
import Card from '../ui/Card';
|
|
|
|
interface DriverCardProps {
|
|
id: string;
|
|
name: string;
|
|
avatar?: string;
|
|
rating: number;
|
|
skillLevel: 'beginner' | 'intermediate' | 'advanced' | 'pro';
|
|
nationality?: string;
|
|
racesCompleted: number;
|
|
wins: number;
|
|
isActive?: boolean;
|
|
onClick?: () => void;
|
|
}
|
|
|
|
export default function DriverCard({
|
|
id,
|
|
name,
|
|
avatar,
|
|
rating,
|
|
skillLevel,
|
|
nationality,
|
|
racesCompleted,
|
|
wins,
|
|
isActive = true,
|
|
onClick,
|
|
}: DriverCardProps) {
|
|
const skillBadgeColors = {
|
|
beginner: 'bg-green-500/20 text-green-400',
|
|
intermediate: 'bg-blue-500/20 text-blue-400',
|
|
advanced: 'bg-purple-500/20 text-purple-400',
|
|
pro: 'bg-red-500/20 text-red-400',
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className="cursor-pointer hover:scale-[1.03] transition-transform duration-150"
|
|
onClick={onClick}
|
|
>
|
|
<Card>
|
|
<div className="space-y-4">
|
|
<div className="flex items-start gap-4">
|
|
<div className="relative">
|
|
<div className="w-16 h-16 bg-charcoal-outline rounded-full flex items-center justify-center flex-shrink-0">
|
|
{avatar ? (
|
|
<img
|
|
src={avatar}
|
|
alt={name}
|
|
className="w-full h-full object-cover rounded-full"
|
|
/>
|
|
) : (
|
|
<span className="text-2xl font-bold text-gray-500">
|
|
{name.charAt(0)}
|
|
</span>
|
|
)}
|
|
</div>
|
|
{isActive && (
|
|
<div className="absolute bottom-0 right-0 w-4 h-4 bg-green-500 border-2 border-iron-gray rounded-full" />
|
|
)}
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<h3 className="text-lg font-semibold text-white truncate">
|
|
{name}
|
|
</h3>
|
|
{nationality && (
|
|
<p className="text-sm text-gray-400">{nationality}</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-4">
|
|
<div className="flex-1">
|
|
<div className="text-2xl font-bold text-white">{rating}</div>
|
|
<div className="text-xs text-gray-400">Rating</div>
|
|
</div>
|
|
<div className="flex-1 text-center">
|
|
<div className="text-2xl font-bold text-white">{wins}</div>
|
|
<div className="text-xs text-gray-400">Wins</div>
|
|
</div>
|
|
<div className="flex-1 text-right">
|
|
<div className="text-2xl font-bold text-white">{racesCompleted}</div>
|
|
<div className="text-xs text-gray-400">Races</div>
|
|
</div>
|
|
</div>
|
|
|
|
<span
|
|
className={`inline-block px-3 py-1 rounded-full text-xs font-medium ${
|
|
skillBadgeColors[skillLevel]
|
|
}`}
|
|
>
|
|
{skillLevel.charAt(0).toUpperCase() + skillLevel.slice(1)}
|
|
</span>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
);
|
|
} |