mmintel/gridpilot.gg
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

website refactor

Browse Source
This commit is contained in:
Marc Mintel
2026-01-15 18:52:03 +01:00
parent f035cfe7ce
commit 5ef149b782
39 changed files with 564 additions and 518 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
apps/website/templates/StewardingTemplate.tsx
View File

@@ -30,9 +30,9 @@ export function StewardingTemplate({ viewData }: StewardingTemplateProps) {
{/* Stats summary */}
<Grid cols={3} gap={4}>
<StatItem label="Pending" value={viewData.totalPending} color="#f59e0b" />
<StatItem label="Resolved" value={viewData.totalResolved} color="#10b981" />
<StatItem label="Penalties" value={viewData.totalPenalties} color="#ef4444" />
<StatItem label="Pending" value={viewData.totalPending} color="text-warning-amber" />
<StatItem label="Resolved" value={viewData.totalResolved} color="text-performance-green" />
<StatItem label="Penalties" value={viewData.totalPenalties} color="text-error-red" />
</Grid>
{/* Content */}
@@ -41,7 +41,7 @@ export function StewardingTemplate({ viewData }: StewardingTemplateProps) {
<Surface variant="muted" rounded="full" padding={4}>
<Icon icon={Flag} size={8} color="#10b981" />
</Surface>
<Box style={{ textAlign: 'center' }}>
<Box textAlign="center">
<Text weight="semibold" size="lg" color="text-white" block mb={1}>All Clear!</Text>
<Text size="sm" color="text-gray-400">No protests or penalties to review.</Text>
</Box>
@@ -54,10 +54,11 @@ export function StewardingTemplate({ viewData }: StewardingTemplateProps) {
variant="muted"
rounded="lg"
border
style={{ overflow: 'hidden', borderColor: '#262626' }}
borderColor="border-neutral-800"
overflow="hidden"
>
{/* Race Header */}
<Box p={4} style={{ backgroundColor: 'rgba(38, 38, 38, 0.5)', borderBottom: '1px solid #262626' }}>
<Box p={4} bg="bg-neutral-800/50" borderBottom="1px solid" borderColor="border-neutral-800">
<Stack direction="row" align="center" gap={4} wrap>
<Stack direction="row" align="center" gap={2}>
<Icon icon={MapPin} size={4} color="#9ca3af" />
@@ -67,7 +68,7 @@ export function StewardingTemplate({ viewData }: StewardingTemplateProps) {
<Icon icon={Calendar} size={4} color="#9ca3af" />
<Text size="sm" color="text-gray-400">{new Date(race.scheduledAt).toLocaleDateString()}</Text>
</Stack>
<Surface variant="muted" rounded="full" padding={1} style={{ backgroundColor: 'rgba(245, 158, 11, 0.1)', paddingLeft: '0.5rem', paddingRight: '0.5rem' }}>
<Surface variant="muted" rounded="full" padding={1} bg="bg-amber-500/10" px={2}>
<Text size="xs" weight="medium" color="text-warning-amber">{race.pendingProtests.length} pending</Text>
</Surface>
</Stack>
@@ -77,7 +78,7 @@ export function StewardingTemplate({ viewData }: StewardingTemplateProps) {
<Box p={4}>
{race.pendingProtests.length === 0 && race.resolvedProtests.length === 0 && race.penalties.length === 0 ? (
<Box py={4}>
<Text size="sm" color="text-gray-400" block style={{ textAlign: 'center' }}>No items to display</Text>
<Text size="sm" color="text-gray-400" block align="center">No items to display</Text>
</Box>
) : (
<Stack gap={3}>
@@ -92,16 +93,17 @@ export function StewardingTemplate({ viewData }: StewardingTemplateProps) {
rounded="lg"
border
padding={4}
style={{ backgroundColor: 'rgba(38, 38, 38, 0.3)', borderColor: '#262626' }}
bg="bg-neutral-800/30"
borderColor="border-neutral-800"
>
<Stack direction="row" align="start" justify="between" gap={4}>
<Box style={{ flex: 1, minWidth: 0 }}>
<Box flex={1} minWidth="0">
<Stack direction="row" align="center" gap={2} mb={2} wrap>
<Icon icon={AlertCircle} size={4} color="#f59e0b" />
<Text weight="medium" color="text-white">
{protester?.name || 'Unknown'} vs {accused?.name || 'Unknown'}
</Text>
<Surface variant="muted" rounded="full" padding={1} style={{ backgroundColor: 'rgba(245, 158, 11, 0.1)', paddingLeft: '0.5rem', paddingRight: '0.5rem' }}>
<Surface variant="muted" rounded="full" padding={1} bg="bg-amber-500/10" px={2}>
<Text size="xs" weight="medium" color="text-warning-amber">Pending</Text>
</Surface>
</Stack>
@@ -127,27 +129,28 @@ export function StewardingTemplate({ viewData }: StewardingTemplateProps) {
rounded="lg"
border
padding={4}
style={{ backgroundColor: 'rgba(38, 38, 38, 0.3)', borderColor: '#262626' }}
bg="bg-neutral-800/30"
borderColor="border-neutral-800"
>
<Stack direction="row" align="center" justify="between" gap={4}>
<Stack direction="row" align="center" gap={3}>
<Surface variant="muted" rounded="full" padding={2} style={{ backgroundColor: 'rgba(239, 68, 68, 0.1)' }}>
<Surface variant="muted" rounded="full" padding={2} bg="bg-red-500/10">
<Icon icon={Gavel} size={4} color="#ef4444" />
</Surface>
<Box>
<Stack direction="row" align="center" gap={2}>
<Text weight="medium" color="text-white">{driver?.name || 'Unknown'}</Text>
<Surface variant="muted" rounded="full" padding={1} style={{ backgroundColor: 'rgba(239, 68, 68, 0.1)', paddingLeft: '0.5rem', paddingRight: '0.5rem' }}>
<Text size="xs" weight="medium" color="text-error-red" style={{ textTransform: 'capitalize' }}>
{penalty.type.replace('_', ' ')}
<Surface variant="muted" rounded="full" padding={1} bg="bg-red-500/10" px={2}>
<Text size="xs" weight="medium" color="text-error-red">
{penalty.type.replace('_', ' ').toUpperCase()}
</Text>
</Surface>
</Stack>
<Text size="sm" color="text-gray-400" block mt={1}>{penalty.reason}</Text>
</Box>
</Stack>
<Box style={{ textAlign: 'right' }}>
<Text weight="bold" color="text-error-red" style={{ fontSize: '1.125rem' }}>
<Box textAlign="right">
<Text weight="bold" color="text-error-red" size="lg">
{penalty.type === 'time_penalty' && `+${penalty.value}s`}
{penalty.type === 'grid_penalty' && `+${penalty.value} grid`}
{penalty.type === 'points_deduction' && `-${penalty.value} pts`}
@@ -175,9 +178,11 @@ export function StewardingTemplate({ viewData }: StewardingTemplateProps) {
function StatItem({ label, value, color }: { label: string, value: string | number, color: string }) {
return (
<Surface variant="muted" rounded="lg" border padding={4} style={{ backgroundColor: 'rgba(38, 38, 38, 0.5)', borderColor: '#262626', textAlign: 'center' }}>
<Text size="2xl" weight="bold" style={{ color }}>{value}</Text>
<Text size="sm" color="text-gray-500" block mt={1}>{label}</Text>
<Surface variant="muted" rounded="lg" border padding={4} bg="bg-neutral-800/50" borderColor="border-neutral-800">
<Box textAlign="center">
<Text size="2xl" weight="bold" color={color}>{value}</Text>
<Text size="sm" color="text-gray-400" block mt={1}>{label}</Text>
</Box>
</Surface>
);
}