119 lines
2.8 KiB
TypeScript
119 lines
2.8 KiB
TypeScript
|
|
|
|
import { CountryFlagFormatter } from '@/lib/formatters/CountryFlagFormatter';
|
|
import { Badge } from '@/ui/Badge';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { Image } from '@/ui/Image';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
import { Zap } from 'lucide-react';
|
|
|
|
interface DriverEntryRowProps {
|
|
index: number;
|
|
name: string;
|
|
avatarUrl: string;
|
|
country: string;
|
|
rating?: number | null;
|
|
isCurrentUser: boolean;
|
|
onClick: () => void;
|
|
}
|
|
|
|
export function DriverEntryRow({
|
|
index,
|
|
name,
|
|
avatarUrl,
|
|
country,
|
|
rating,
|
|
isCurrentUser,
|
|
onClick,
|
|
}: DriverEntryRowProps) {
|
|
return (
|
|
<Stack
|
|
onClick={onClick}
|
|
direction="row"
|
|
align="center"
|
|
gap={3}
|
|
p={3}
|
|
rounded="xl"
|
|
cursor="pointer"
|
|
transition
|
|
bg={isCurrentUser ? 'rgba(25, 140, 255, 0.1)' : 'transparent'}
|
|
border
|
|
borderColor={isCurrentUser ? 'rgba(25, 140, 255, 0.3)' : 'transparent'}
|
|
hoverBorderColor={isCurrentUser ? 'rgba(25, 140, 255, 0.4)' : 'var(--ui-color-border-low)'}
|
|
>
|
|
<Stack
|
|
display="flex"
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
w="8"
|
|
h="8"
|
|
rounded="lg"
|
|
bg="var(--ui-color-bg-surface-muted)"
|
|
color="var(--ui-color-text-low)"
|
|
weight="bold"
|
|
fontSize="0.875rem"
|
|
>
|
|
{index + 1}
|
|
</Stack>
|
|
|
|
<Stack position="relative" flexShrink={0}>
|
|
<Stack
|
|
w="10"
|
|
h="10"
|
|
rounded="full"
|
|
overflow="hidden"
|
|
border={isCurrentUser}
|
|
borderColor={isCurrentUser ? 'var(--ui-color-intent-primary)' : ''}
|
|
>
|
|
<Image
|
|
src={avatarUrl}
|
|
alt={name}
|
|
width={40}
|
|
height={40}
|
|
objectFit="cover"
|
|
fill
|
|
/>
|
|
</Stack>
|
|
<Stack
|
|
position="absolute"
|
|
bottom="-0.5"
|
|
right="-0.5"
|
|
w="5"
|
|
h="5"
|
|
rounded="full"
|
|
bg="var(--ui-color-bg-base)"
|
|
display="flex"
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
fontSize="0.625rem"
|
|
>
|
|
{CountryFlagFormatter.fromCountryCode(country).toString()}
|
|
</Stack>
|
|
</Stack>
|
|
|
|
<Stack flexGrow={1} minWidth="0">
|
|
<Stack direction="row" align="center" gap={2}>
|
|
<Text
|
|
weight="semibold"
|
|
size="sm"
|
|
variant={isCurrentUser ? 'primary' : 'high'}
|
|
truncate
|
|
>
|
|
{name}
|
|
</Text>
|
|
{isCurrentUser && <Badge variant="primary">You</Badge>}
|
|
</Stack>
|
|
<Text size="xs" variant="low">{country}</Text>
|
|
</Stack>
|
|
|
|
{rating != null && (
|
|
<Badge variant="warning">
|
|
<Icon icon={Zap} size={3} />
|
|
{rating}
|
|
</Badge>
|
|
)}
|
|
</Stack>
|
|
);
|
|
}
|