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-18 16:18:18 +01:00
parent 0b301feb61
commit 13567d51af
329 changed files with 4701 additions and 4750 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
apps/website/components/leagues/QuickPenaltyModal.tsx
View File

@@ -4,9 +4,8 @@ import { useState } from 'react';
import { Button } from '@/ui/Button';
import { usePenaltyMutation } from "@/hooks/league/usePenaltyMutation";
import { AlertTriangle, Clock, Flag, Zap } from 'lucide-react';
import { Box } from '@/ui/Box';
import { Text } from '@/ui/Text';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Heading } from '@/ui/Heading';
import { Icon } from '@/ui/Icon';
import { Select } from '@/ui/Select';
@@ -78,18 +77,18 @@ export function QuickPenaltyModal({ raceId, drivers, onClose, onRefresh, preSele
};
return (
<Box position="fixed" inset="0" zIndex={50} display="flex" alignItems="center" justifyContent="center" p={4} bg="bg-black/70"
<Stack position="fixed" inset="0" zIndex={50} display="flex" alignItems="center" justifyContent="center" p={4} bg="bg-black/70"
// eslint-disable-next-line gridpilot-rules/component-classification
className="backdrop-blur-sm"
>
<Box w="full" maxWidth="md" bg="bg-iron-gray" rounded="xl" border borderColor="border-charcoal-outline" shadow="2xl">
<Box p={6}>
<Stack w="full" maxWidth="md" bg="bg-iron-gray" rounded="xl" border borderColor="border-charcoal-outline" shadow="2xl">
<Stack p={6}>
<Heading level={2} fontSize="xl" weight="bold" color="text-white" mb={4}>Quick Penalty</Heading>
<Box as="form" onSubmit={handleSubmit} display="flex" flexDirection="col" gap={4}>
<Stack as="form" onSubmit={handleSubmit} display="flex" flexDirection="col" gap={4}>
{/* Race Selection */}
{races && !raceId && (
<Box>
<Stack>
<Text as="label" size="sm" weight="medium" color="text-gray-300" block mb={2}>
Race
</Text>
@@ -105,18 +104,18 @@ export function QuickPenaltyModal({ raceId, drivers, onClose, onRefresh, preSele
})),
]}
/>
</Box>
</Stack>
)}
{/* Driver Selection */}
<Box>
<Stack>
<Text as="label" size="sm" weight="medium" color="text-gray-300" block mb={2}>
Driver
</Text>
{preSelectedDriver ? (
<Box w="full" px={3} py={2} bg="bg-deep-graphite" border borderColor="border-charcoal-outline" rounded="lg" color="text-white">
<Stack w="full" px={3} py={2} bg="bg-deep-graphite" border borderColor="border-charcoal-outline" rounded="lg" color="text-white">
{preSelectedDriver.name}
</Box>
</Stack>
) : (
<Select
value={selectedDriver}
@@ -131,16 +130,16 @@ export function QuickPenaltyModal({ raceId, drivers, onClose, onRefresh, preSele
]}
/>
)}
</Box>
</Stack>
{/* Infraction Type */}
<Box>
<Stack>
<Text as="label" size="sm" weight="medium" color="text-gray-300" block mb={2}>
Infraction Type
</Text>
<Box display="grid" gridCols={2} gap={2}>
<Stack display="grid" gridCols={2} gap={2}>
{INFRACTION_TYPES.map(({ value, label, icon: InfractionIcon }) => (
<Box
<Stack
key={value}
as="button"
type="button"
@@ -159,19 +158,19 @@ export function QuickPenaltyModal({ raceId, drivers, onClose, onRefresh, preSele
>
<Icon icon={InfractionIcon} size={4} />
<Text size="sm">{label}</Text>
</Box>
</Stack>
))}
</Box>
</Box>
</Stack>
</Stack>
{/* Severity */}
<Box>
<Stack>
<Text as="label" size="sm" weight="medium" color="text-gray-300" block mb={2}>
Severity
</Text>
<Stack gap={2}>
{SEVERITY_LEVELS.map(({ value, label, description }) => (
<Box
<Stack
key={value}
as="button"
type="button"
@@ -189,13 +188,13 @@ export function QuickPenaltyModal({ raceId, drivers, onClose, onRefresh, preSele
>
<Text weight="medium" block>{label}</Text>
<Text size="xs" opacity={0.75} block>{description}</Text>
</Box>
</Stack>
))}
</Stack>
</Box>
</Stack>
{/* Notes */}
<Box>
<Stack>
<Text as="label" size="sm" weight="medium" color="text-gray-300" block mb={2}>
Notes (Optional)
</Text>
@@ -205,16 +204,16 @@ export function QuickPenaltyModal({ raceId, drivers, onClose, onRefresh, preSele
placeholder="Additional details..."
rows={3}
/>
</Box>
</Stack>
{error && (
<Box p={3} bg="bg-red-500/10" border borderColor="border-red-500/20" rounded="lg">
<Stack p={3} bg="bg-red-500/10" border borderColor="border-red-500/20" rounded="lg">
<Text size="sm" color="text-red-400" block>{error}</Text>
</Box>
</Stack>
)}
{/* Actions */}
<Box display="flex" gap={3} pt={4}>
<Stack display="flex" gap={3} pt={4}>
<Button
type="button"
variant="secondary"
@@ -232,10 +231,10 @@ export function QuickPenaltyModal({ raceId, drivers, onClose, onRefresh, preSele
>
{penaltyMutation.isPending ? 'Applying...' : 'Apply Penalty'}
</Button>
</Box>
</Box>
</Box>
</Box>
</Box>
</Stack>
</Stack>
</Stack>
</Stack>
</Stack>
);
}