67 lines
2.2 KiB
TypeScript
67 lines
2.2 KiB
TypeScript
'use client';
|
|
|
|
import { DriverIdentity } from '@/ui/DriverIdentity';
|
|
import { ProfileCard } from '@/ui/ProfileCard';
|
|
import { Badge } from '@/ui/Badge';
|
|
import { Grid } from '@/ui/Grid';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
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) {
|
|
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={
|
|
<Grid cols={3} gap="px" style={{ backgroundColor: 'var(--ui-color-border-muted)', border: '1px solid var(--ui-color-border-muted)', borderRadius: 'var(--ui-radius-md)', overflow: 'hidden' }}>
|
|
<Stack padding={2} align="center" style={{ backgroundColor: 'var(--ui-color-bg-surface)' }}>
|
|
<Text size="xs" variant="low" uppercase block mono>Races</Text>
|
|
<Text size="sm" weight="bold" mono variant="high">{driver.racesCompleted}</Text>
|
|
</Stack>
|
|
<Stack padding={2} align="center" style={{ backgroundColor: 'var(--ui-color-bg-surface)' }}>
|
|
<Text size="xs" variant="low" uppercase block mono>Wins</Text>
|
|
<Text size="sm" weight="bold" mono variant="primary">{driver.wins}</Text>
|
|
</Stack>
|
|
<Stack padding={2} align="center" style={{ backgroundColor: 'var(--ui-color-bg-surface)' }}>
|
|
<Text size="xs" variant="low" uppercase block mono>Podiums</Text>
|
|
<Text size="sm" weight="bold" mono variant="warning">{driver.podiums}</Text>
|
|
</Stack>
|
|
</Grid>
|
|
}
|
|
/>
|
|
);
|
|
}
|