59 lines
2.4 KiB
TypeScript
59 lines
2.4 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { Box } from '@/ui/Box';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
import { Surface } from '@/ui/Surface';
|
|
|
|
interface PenaltyEntry {
|
|
driverId: string;
|
|
driverName: string;
|
|
type: 'time_penalty' | 'grid_penalty' | 'points_deduction' | 'disqualification' | 'warning' | 'license_points';
|
|
value: number;
|
|
reason: string;
|
|
notes?: string;
|
|
}
|
|
|
|
interface RacePenaltyRowProps {
|
|
penalty: PenaltyEntry;
|
|
}
|
|
|
|
export function RacePenaltyRow({ penalty }: RacePenaltyRowProps) {
|
|
return (
|
|
<Surface variant="dark" rounded="lg" padding={3}>
|
|
<Stack direction="row" align="center" gap={3}>
|
|
<Surface variant="muted" rounded="full" padding={1} style={{ width: '2.5rem', height: '2.5rem', backgroundColor: 'rgba(239, 68, 68, 0.2)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
|
<Text color="text-error-red" weight="bold">!</Text>
|
|
</Surface>
|
|
<Box style={{ flex: 1 }}>
|
|
<Stack direction="row" align="center" gap={2} mb={1}>
|
|
<Text weight="medium" color="text-white">{penalty.driverName}</Text>
|
|
<Surface variant="muted" rounded="full" padding={1} style={{ backgroundColor: 'rgba(239, 68, 68, 0.2)', paddingLeft: '0.5rem', paddingRight: '0.5rem' }}>
|
|
<Text size="xs" weight="medium" color="text-error-red" style={{ textTransform: 'capitalize' }}>
|
|
{penalty.type.replace('_', ' ')}
|
|
</Text>
|
|
</Surface>
|
|
</Stack>
|
|
<Text size="sm" color="text-gray-400" block>{penalty.reason}</Text>
|
|
{penalty.notes && (
|
|
<Box mt={1}>
|
|
<Text size="sm" color="text-gray-500" block style={{ fontStyle: 'italic' }}>{penalty.notes}</Text>
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
<Box style={{ textAlign: 'right' }}>
|
|
<Text size="2xl" weight="bold" color="text-error-red">
|
|
{penalty.type === 'time_penalty' && `+${penalty.value}s`}
|
|
{penalty.type === 'grid_penalty' && `+${penalty.value} grid`}
|
|
{penalty.type === 'points_deduction' && `-${penalty.value} pts`}
|
|
{penalty.type === 'disqualification' && 'DSQ'}
|
|
{penalty.type === 'warning' && 'Warning'}
|
|
{penalty.type === 'license_points' && `${penalty.value} LP`}
|
|
</Text>
|
|
</Box>
|
|
</Stack>
|
|
</Surface>
|
|
);
|
|
}
|