72 lines
1.7 KiB
TypeScript
72 lines
1.7 KiB
TypeScript
import React from 'react';
|
|
import { Card } from '@/ui/Card';
|
|
import { RankBadge } from '@/ui/RankBadge';
|
|
import { DriverIdentity } from '@/components/drivers/DriverIdentity';
|
|
import { DriverViewModel } from '@/lib/view-models/DriverViewModel';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { DriverStats } from '@/ui/DriverStats';
|
|
import { routes } from '@/lib/routing/RouteConfig';
|
|
|
|
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 function DriverCard(props: DriverCardProps) {
|
|
const {
|
|
id,
|
|
name,
|
|
rating,
|
|
nationality,
|
|
racesCompleted,
|
|
wins,
|
|
podiums,
|
|
rank,
|
|
onClick,
|
|
} = props;
|
|
|
|
// Create a proper DriverViewModel instance
|
|
const driverViewModel = new DriverViewModel({
|
|
id,
|
|
name,
|
|
avatarUrl: null,
|
|
});
|
|
|
|
const winRate = racesCompleted > 0 ? ((wins / racesCompleted) * 100).toFixed(0) : '0';
|
|
|
|
return (
|
|
<Card
|
|
onClick={onClick}
|
|
transition
|
|
>
|
|
<Stack direction="row" align="center" justify="between">
|
|
<Stack direction="row" align="center" gap={4} flexGrow={1}>
|
|
<RankBadge rank={rank} size="lg" />
|
|
|
|
<DriverIdentity
|
|
driver={driverViewModel}
|
|
href={routes.driver.detail(id)}
|
|
meta={`${nationality} • ${racesCompleted} races`}
|
|
size="md"
|
|
/>
|
|
</Stack>
|
|
|
|
<DriverStats
|
|
rating={rating}
|
|
wins={wins}
|
|
podiums={podiums}
|
|
winRate={winRate}
|
|
/>
|
|
</Stack>
|
|
</Card>
|
|
);
|
|
}
|