63 lines
1.6 KiB
TypeScript
63 lines
1.6 KiB
TypeScript
|
|
|
|
import { Badge } from '@/ui/Badge';
|
|
import { Box } from '@/ui/Box';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Surface } from '@/ui/Surface';
|
|
import { Text } from '@/ui/Text';
|
|
|
|
interface PenaltyRowProps {
|
|
driverName: string;
|
|
type: string;
|
|
reason: string;
|
|
notes?: string;
|
|
value: string | number;
|
|
valueLabel?: string;
|
|
}
|
|
|
|
export function PenaltyRow({
|
|
driverName,
|
|
type,
|
|
reason,
|
|
notes,
|
|
value,
|
|
valueLabel,
|
|
}: PenaltyRowProps) {
|
|
return (
|
|
<Surface variant="dark" rounded="lg" p={3} border borderColor="border-charcoal-outline/50">
|
|
<Stack direction="row" align="center" gap={3}>
|
|
<Box
|
|
display="flex"
|
|
h="10"
|
|
w="10"
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
rounded="full"
|
|
bg="bg-red-600/20"
|
|
>
|
|
<Text color="text-red-500" weight="bold">!</Text>
|
|
</Box>
|
|
<Box flexGrow={1}>
|
|
<Stack direction="row" align="center" gap={2} mb={1}>
|
|
<Text weight="medium" color="text-white">{driverName}</Text>
|
|
<Badge variant="danger">
|
|
{type.replace('_', ' ')}
|
|
</Badge>
|
|
</Stack>
|
|
<Text size="sm" color="text-gray-400" block>{reason}</Text>
|
|
{notes && (
|
|
<Text size="sm" color="text-gray-500" block mt={1} italic>
|
|
{notes}
|
|
</Text>
|
|
)}
|
|
</Box>
|
|
<Box textAlign="right">
|
|
<Text size="2xl" weight="bold" color="text-red-500">
|
|
{value} {valueLabel}
|
|
</Text>
|
|
</Box>
|
|
</Stack>
|
|
</Surface>
|
|
);
|
|
}
|