79 lines
2.0 KiB
TypeScript
79 lines
2.0 KiB
TypeScript
'use client';
|
|
|
|
import { RatingBadge } from '@/components/drivers/RatingBadge';
|
|
import { Text } from '@/ui/Text';
|
|
import { Box } from '@/ui/Box';
|
|
import { TableRow, TableCell } from '@/ui/Table';
|
|
import { Avatar } from '@/ui/Avatar';
|
|
import { CountryFlag } from '@/ui/CountryFlag';
|
|
|
|
interface DriverTableRowProps {
|
|
rank: number;
|
|
name: string;
|
|
avatarUrl?: string | null;
|
|
nationality: string;
|
|
rating: number;
|
|
ratingLabel: string;
|
|
winsLabel: string;
|
|
onClick: () => void;
|
|
}
|
|
|
|
export function DriverTableRow({
|
|
rank,
|
|
name,
|
|
avatarUrl,
|
|
nationality,
|
|
rating,
|
|
ratingLabel,
|
|
winsLabel,
|
|
onClick,
|
|
}: DriverTableRowProps) {
|
|
return (
|
|
<TableRow onClick={onClick}>
|
|
<TableCell textAlign="center">
|
|
<Text
|
|
size="sm"
|
|
weight="bold"
|
|
mono
|
|
variant={rank <= 3 ? 'warning' : 'low'}
|
|
>
|
|
{rank.toString().padStart(2, '0')}
|
|
</Text>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Box display="flex" alignItems="center" gap={3}>
|
|
<Avatar
|
|
src={avatarUrl || undefined}
|
|
alt={name}
|
|
size="sm"
|
|
/>
|
|
<Text
|
|
size="sm"
|
|
weight="semibold"
|
|
variant="high"
|
|
>
|
|
{name}
|
|
</Text>
|
|
</Box>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Box display="flex" alignItems="center" gap={2}>
|
|
<CountryFlag countryCode={nationality} size="sm" />
|
|
<Text size="xs" variant="low" uppercase>{nationality}</Text>
|
|
</Box>
|
|
</TableCell>
|
|
<TableCell textAlign="right">
|
|
<Box display="flex" alignItems="center" justifyContent="end" gap={2}>
|
|
<Text size="xs" variant="low" mono>{rating}</Text>
|
|
<RatingBadge rating={rating} ratingLabel={ratingLabel} size="sm" />
|
|
</Box>
|
|
</TableCell>
|
|
<TableCell textAlign="right">
|
|
<Text size="sm" weight="bold" mono variant="success">
|
|
{winsLabel}
|
|
</Text>
|
|
</TableCell>
|
|
</TableRow>
|
|
);
|
|
}
|