87 lines
2.2 KiB
TypeScript
87 lines
2.2 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { RatingBadge } from '@/components/drivers/RatingBadge';
|
|
import { Text } from '@/ui/Text';
|
|
import { Box } from '@/ui/Box';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Image } from '@/ui/Image';
|
|
|
|
interface DriverTableRowProps {
|
|
rank: number;
|
|
name: string;
|
|
avatarUrl?: string | null;
|
|
nationality: string;
|
|
rating: number;
|
|
wins: number;
|
|
onClick: () => void;
|
|
}
|
|
|
|
export function DriverTableRow({
|
|
rank,
|
|
name,
|
|
avatarUrl,
|
|
nationality,
|
|
rating,
|
|
wins,
|
|
onClick,
|
|
}: DriverTableRowProps) {
|
|
const defaultAvatar = 'https://cdn.gridpilot.com/avatars/default.png';
|
|
|
|
return (
|
|
<Box
|
|
as="tr"
|
|
onClick={onClick}
|
|
cursor="pointer"
|
|
transition
|
|
hoverBg="bg-primary-blue/5"
|
|
group
|
|
borderBottom
|
|
borderColor="border-charcoal-outline/50"
|
|
>
|
|
<Box as="td" px={6} py={4} textAlign="center">
|
|
<Text
|
|
size="sm"
|
|
weight="bold"
|
|
font="mono"
|
|
color={rank <= 3 ? 'text-warning-amber' : 'text-gray-500'}
|
|
>
|
|
{rank}
|
|
</Text>
|
|
</Box>
|
|
<Box as="td" px={6} py={4}>
|
|
<Stack direction="row" align="center" gap={3}>
|
|
<Box position="relative" h="8" w="8" overflow="hidden" rounded="full" border borderColor="border-charcoal-outline" bg="bg-deep-charcoal">
|
|
<Image
|
|
src={avatarUrl || defaultAvatar}
|
|
alt={name}
|
|
fill
|
|
objectFit="cover"
|
|
/>
|
|
</Box>
|
|
<Text
|
|
size="sm"
|
|
weight="semibold"
|
|
color="text-white"
|
|
groupHoverTextColor="text-primary-blue"
|
|
transition
|
|
>
|
|
{name}
|
|
</Text>
|
|
</Stack>
|
|
</Box>
|
|
<Box as="td" px={6} py={4}>
|
|
<Text size="xs" color="text-gray-400">{nationality}</Text>
|
|
</Box>
|
|
<Box as="td" px={6} py={4} textAlign="right">
|
|
<RatingBadge rating={rating} size="sm" />
|
|
</Box>
|
|
<Box as="td" px={6} py={4} textAlign="right">
|
|
<Text size="sm" weight="semibold" font="mono" color="text-performance-green">
|
|
{wins}
|
|
</Text>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|