97 lines
2.9 KiB
TypeScript
97 lines
2.9 KiB
TypeScript
'use client';
|
|
|
|
import { CountryFlagFormatter } from '@/lib/formatters/CountryFlagFormatter';
|
|
import { Badge } from '@/ui/Badge';
|
|
import { Box } from '@/ui/Box';
|
|
import { Group } from '@/ui/Group';
|
|
import { Image } from '@/ui/Image';
|
|
import { PositionBadge, ResultPoints, ResultRow } from '@/ui/ResultRow';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Surface } from '@/ui/Surface';
|
|
import { Text } from '@/ui/Text';
|
|
|
|
interface ResultEntry {
|
|
position: number;
|
|
driverId: string;
|
|
driverName: string;
|
|
driverAvatar: string;
|
|
country: string;
|
|
car: string;
|
|
laps: number;
|
|
time: string;
|
|
fastestLap: string;
|
|
points: number;
|
|
incidents: number;
|
|
isCurrentUser: boolean;
|
|
}
|
|
|
|
interface RaceResultRowProps {
|
|
result: ResultEntry;
|
|
points: number;
|
|
}
|
|
|
|
export function RaceResultRow({ result, points }: RaceResultRowProps) {
|
|
const { isCurrentUser, position, driverAvatar, driverName, country, car, laps, incidents, time, fastestLap } = result;
|
|
|
|
return (
|
|
<ResultRow isHighlighted={isCurrentUser}>
|
|
<PositionBadge position={position} />
|
|
|
|
{/* Avatar */}
|
|
<Box position="relative" flexShrink={0}>
|
|
<Surface
|
|
width="2.5rem"
|
|
height="2.5rem"
|
|
rounded="full"
|
|
overflow="hidden"
|
|
border={isCurrentUser ? '2px solid var(--ui-color-intent-primary)' : true}
|
|
>
|
|
<Image src={driverAvatar} alt={driverName} width={40} height={40} objectFit="cover" />
|
|
</Surface>
|
|
<Surface
|
|
position="absolute"
|
|
bottom="-0.125rem"
|
|
right="-0.125rem"
|
|
width="1.25rem"
|
|
height="1.25rem"
|
|
rounded="full"
|
|
variant="dark"
|
|
display="flex"
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
>
|
|
<Text size="xs" style={{ fontSize: '0.625rem' }}>
|
|
{CountryFlagFormatter.fromCountryCode(country).toString()}
|
|
</Text>
|
|
</Surface>
|
|
</Box>
|
|
|
|
{/* Driver Info */}
|
|
<Stack flex={1} minWidth="0" gap={1}>
|
|
<Group gap={2}>
|
|
<Text weight="semibold" size="sm" variant={isCurrentUser ? 'primary' : 'high'} truncate>{driverName}</Text>
|
|
{isCurrentUser && (
|
|
<Badge variant="primary" size="sm">YOU</Badge>
|
|
)}
|
|
</Group>
|
|
<Group gap={2}>
|
|
<Text size="xs" variant="low">{car}</Text>
|
|
<Text size="xs" variant="low">•</Text>
|
|
<Text size="xs" variant="low">Laps: {laps}</Text>
|
|
<Text size="xs" variant="low">•</Text>
|
|
<Text size="xs" variant="low">Incidents: {incidents}</Text>
|
|
</Group>
|
|
</Stack>
|
|
|
|
{/* Times */}
|
|
<Stack textAlign="right" minWidth="100px" gap={1}>
|
|
<Text size="sm" font="mono" variant="high" block>{time}</Text>
|
|
<Text size="xs" variant="success" block>FL: {fastestLap}</Text>
|
|
</Stack>
|
|
|
|
{/* Points */}
|
|
<ResultPoints points={points} />
|
|
</ResultRow>
|
|
);
|
|
}
|