67 lines
1.6 KiB
TypeScript
67 lines
1.6 KiB
TypeScript
'use client';
|
|
|
|
import { DriverIdentity } from '@/ui/DriverIdentity';
|
|
import { ProfileCard } from '@/ui/ProfileCard';
|
|
import { StatGrid } from '@/ui/StatGrid';
|
|
import { Badge } from '@/ui/Badge';
|
|
import { Flag, Trophy, Medal } from 'lucide-react';
|
|
|
|
interface DriverCardProps {
|
|
driver: {
|
|
id: string;
|
|
name: string;
|
|
avatarUrl?: string;
|
|
rating: number;
|
|
ratingLabel: string;
|
|
nationality: string;
|
|
racesCompleted: number;
|
|
wins: number;
|
|
podiums: number;
|
|
rank: number;
|
|
};
|
|
onClick: (id: string) => void;
|
|
}
|
|
|
|
export function DriverCard({ driver, onClick }: DriverCardProps) {
|
|
const stats = [
|
|
{ label: 'Races', value: driver.racesCompleted, intent: 'low', icon: Flag },
|
|
{ label: 'Wins', value: driver.wins, intent: 'primary', icon: Trophy },
|
|
{ label: 'Podiums', value: driver.podiums, intent: 'warning', icon: Medal },
|
|
];
|
|
|
|
return (
|
|
<ProfileCard
|
|
onClick={() => onClick(driver.id)}
|
|
variant="muted"
|
|
identity={
|
|
<DriverIdentity
|
|
driver={{
|
|
id: driver.id,
|
|
name: driver.name,
|
|
avatarUrl: driver.avatarUrl || null,
|
|
}}
|
|
contextLabel={`Rank #${driver.rank}`}
|
|
meta={driver.nationality}
|
|
/>
|
|
}
|
|
actions={
|
|
<Badge variant="outline" size="sm">
|
|
{driver.ratingLabel}
|
|
</Badge>
|
|
}
|
|
stats={
|
|
<StatGrid
|
|
stats={stats.map(s => ({
|
|
label: s.label,
|
|
value: s.value,
|
|
intent: s.intent as any,
|
|
icon: s.icon
|
|
}))}
|
|
columns={3}
|
|
variant="box"
|
|
/>
|
|
}
|
|
/>
|
|
);
|
|
}
|