121 lines
4.8 KiB
TypeScript
121 lines
4.8 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { Section } from '@/ui/Section';
|
|
import { Panel } from '@/ui/Panel';
|
|
import { Text } from '@/ui/Text';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { StatusBadge } from '@/ui/StatusBadge';
|
|
import { Button } from '@/ui/Button';
|
|
import { Group } from '@/ui/Group';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Grid } from '@/ui/Grid';
|
|
import { Box } from '@/ui/Box';
|
|
import { Gavel, Clock, User, MessageSquare } from 'lucide-react';
|
|
|
|
interface StewardingPreviewProps {
|
|
race?: {
|
|
id: string;
|
|
track: string;
|
|
car: string;
|
|
formattedDate: string;
|
|
};
|
|
team?: {
|
|
id: string;
|
|
name: string;
|
|
description: string;
|
|
};
|
|
}
|
|
|
|
/**
|
|
* StewardingPreview - Refined for "Modern Precision" and "Dieter Rams" style.
|
|
* Thorough down to the last detail.
|
|
*/
|
|
export function StewardingPreview({ race, team }: StewardingPreviewProps) {
|
|
const incidentId = race ? `${race.id.slice(0, 3).toUpperCase()}-WG` : '402-WG';
|
|
const trackName = race?.track || 'Watkins Glen - Cup';
|
|
const carName = race?.car || 'Porsche 911 GT3 R';
|
|
const teamName = team?.name || 'Alex Miller';
|
|
|
|
return (
|
|
<Section variant="muted" py={32}>
|
|
<Box>
|
|
<Box marginBottom={16} maxWidth="42rem">
|
|
<Heading level={2} weight="bold" marginBottom={6}>Structured Stewarding</Heading>
|
|
<Text variant="med" size="lg" leading="relaxed">
|
|
Protests are part of racing. Managing them shouldn't be a second job.
|
|
GridPilot provides a dedicated workflow for drivers to report incidents and for you to resolve them with precision.
|
|
</Text>
|
|
</Box>
|
|
|
|
<Panel variant="elevated" padding="lg">
|
|
<Stack gap={8}>
|
|
<Group justify="between" align="center">
|
|
<Stack gap={1}>
|
|
<Group gap={2}>
|
|
<Text variant="low" size="xs" uppercase weight="bold" letterSpacing="0.1em">Incident Report</Text>
|
|
<Text variant="low" size="xs">•</Text>
|
|
<Text variant="low" size="xs" uppercase weight="bold" letterSpacing="0.1em">ID: {incidentId}</Text>
|
|
</Group>
|
|
<Heading level={3} weight="bold">Turn 1 Contact: {teamName} vs David Chen</Heading>
|
|
</Stack>
|
|
<StatusBadge variant="warning">UNDER REVIEW</StatusBadge>
|
|
</Group>
|
|
|
|
<Grid cols={{ base: 1, md: 3 }} gap={6}>
|
|
<Panel variant="bordered" padding="md">
|
|
<Stack gap={3}>
|
|
<Group gap={2}>
|
|
<User size={14} className="text-[var(--ui-color-intent-primary)]" />
|
|
<Text size="xs" uppercase weight="bold" variant="low">Protestor</Text>
|
|
</Group>
|
|
<Text weight="bold">{teamName}</Text>
|
|
<Text size="sm" variant="low">#42 - {carName}</Text>
|
|
</Stack>
|
|
</Panel>
|
|
<Panel variant="bordered" padding="md">
|
|
<Stack gap={3}>
|
|
<Group gap={2}>
|
|
<User size={14} className="text-[var(--ui-color-intent-critical)]" />
|
|
<Text size="xs" uppercase weight="bold" variant="low">Defendant</Text>
|
|
</Group>
|
|
<Text weight="bold">David Chen</Text>
|
|
<Text size="sm" variant="low">#18 - BMW M4 GT3</Text>
|
|
</Stack>
|
|
</Panel>
|
|
<Panel variant="bordered" padding="md">
|
|
<Stack gap={3}>
|
|
<Group gap={2}>
|
|
<Clock size={14} className="text-[var(--ui-color-text-low)]" />
|
|
<Text size="xs" uppercase weight="bold" variant="low">Session Info</Text>
|
|
</Group>
|
|
<Text weight="bold">Lap 1, 00:42.150</Text>
|
|
<Text size="sm" variant="low">{trackName}</Text>
|
|
</Stack>
|
|
</Panel>
|
|
</Grid>
|
|
|
|
<Stack gap={4}>
|
|
<Group gap={2}>
|
|
<MessageSquare size={14} className="text-[var(--ui-color-text-low)]" />
|
|
<Text size="xs" uppercase weight="bold" variant="low">Description</Text>
|
|
</Group>
|
|
<Panel variant="muted" padding="md">
|
|
<Text size="sm" variant="high" leading="relaxed">
|
|
"David missed his braking point into T1 and hit my rear right corner.
|
|
I was forced into the grass and lost 4 positions. Replay attached shows he was never alongside."
|
|
</Text>
|
|
</Panel>
|
|
</Stack>
|
|
|
|
<Group gap={3} justify="end">
|
|
<Button variant="secondary" size="md">Dismiss</Button>
|
|
<Button variant="primary" size="md" icon={<Gavel size={16} />}>Apply Penalty</Button>
|
|
</Group>
|
|
</Stack>
|
|
</Panel>
|
|
</Box>
|
|
</Section>
|
|
);
|
|
}
|