80 lines
2.2 KiB
TypeScript
80 lines
2.2 KiB
TypeScript
import Card from '@/components/ui/Card';
|
|
import RankBadge from '@/components/drivers/RankBadge';
|
|
import DriverIdentity from '@/components/drivers/DriverIdentity';
|
|
import type { DriverDTO } from '@gridpilot/racing/application/dto/DriverDTO';
|
|
|
|
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 {
|
|
id,
|
|
name,
|
|
rating,
|
|
nationality,
|
|
racesCompleted,
|
|
wins,
|
|
podiums,
|
|
rank,
|
|
onClick,
|
|
} = props;
|
|
|
|
const driver: DriverDTO = {
|
|
id,
|
|
iracingId: '',
|
|
name,
|
|
country: nationality,
|
|
joinedAt: '',
|
|
};
|
|
|
|
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" />
|
|
|
|
<DriverIdentity
|
|
driver={driver}
|
|
href={`/drivers/${id}`}
|
|
meta={`${nationality} • ${racesCompleted} races`}
|
|
size="md"
|
|
/>
|
|
</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>
|
|
);
|
|
} |