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

125
apps/website/components/leagues/LeagueStewardingSection.tsx
View File

@@ -3,9 +3,8 @@
import React from 'react';
import { Scale, Clock, Bell, Shield, Vote, AlertTriangle } from 'lucide-react';
import type { LeagueConfigFormModel } from '@/lib/types/LeagueConfigFormModel';
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';
@@ -75,7 +74,7 @@ export function LeagueStewardingSection({
return (
<Stack gap={8}>
{/* Decision Mode Selection */}
<Box>
<Stack>
<Heading level={3} fontSize="sm" weight="semibold" color="text-white" mb={1}>
<Stack direction="row" align="center" gap={2}>
<Icon icon={Scale} size={4} color="text-primary-blue" />
@@ -86,9 +85,9 @@ export function LeagueStewardingSection({
Choose who has the authority to issue penalties
</Text>
<Box display="grid" gridCols={{ base: 1, sm: 2, lg: 3 }} gap={3}>
<Stack display="grid" gridCols={{ base: 1, sm: 2, lg: 3 }} gap={3}>
{decisionModeOptions.map((option) => (
<Box
<Stack
key={option.value}
as="button"
type="button"
@@ -112,29 +111,29 @@ export function LeagueStewardingSection({
opacity={readOnly ? 0.6 : 1}
cursor={readOnly ? 'not-allowed' : 'pointer'}
>
<Box
<Stack
p={2}
rounded="lg"
bg={stewarding.decisionMode === option.value ? 'bg-primary-blue/20' : 'bg-charcoal-outline/50'}
color={stewarding.decisionMode === option.value ? 'text-primary-blue' : 'text-gray-400'}
>
{option.icon}
</Box>
<Box>
</Stack>
<Stack>
<Text size="sm" weight="medium" color="text-white" block>{option.label}</Text>
<Text size="xs" color="text-gray-400" mt={0.5} block>{option.description}</Text>
</Box>
</Stack>
{stewarding.decisionMode === option.value && (
<Box position="absolute" top="2" right="2" w="2" h="2" rounded="full" bg="bg-primary-blue" />
<Stack position="absolute" top="2" right="2" w="2" h="2" rounded="full" bg="bg-primary-blue" />
)}
</Box>
</Stack>
))}
</Box>
</Box>
</Stack>
</Stack>
{/* Vote Requirements (conditional) */}
{selectedMode?.requiresVotes && (
<Box p={4} rounded="xl" bg="bg-iron-gray/40" border borderColor="border-charcoal-outline">
<Stack p={4} rounded="xl" bg="bg-iron-gray/40" border borderColor="border-charcoal-outline">
<Stack gap={4}>
<Heading level={4} fontSize="sm" weight="medium" color="text-white">
<Stack direction="row" align="center" gap={2}>
@@ -143,8 +142,8 @@ export function LeagueStewardingSection({
</Stack>
</Heading>
<Box display="grid" gridCols={{ base: 1, sm: 2 }} gap={4}>
<Box>
<Stack display="grid" gridCols={{ base: 1, sm: 2 }} gap={4}>
<Stack>
<Text as="label" size="xs" weight="medium" color="text-gray-400" block mb={1.5}>
Required votes to uphold
</Text>
@@ -160,9 +159,9 @@ export function LeagueStewardingSection({
{ value: '5', label: '5 votes' },
]}
/>
</Box>
</Stack>
<Box>
<Stack>
<Text as="label" size="xs" weight="medium" color="text-gray-400" block mb={1.5}>
Voting time limit
</Text>
@@ -178,14 +177,14 @@ export function LeagueStewardingSection({
{ value: '168', label: '168 hours (7 days)' },
]}
/>
</Box>
</Box>
</Stack>
</Stack>
</Stack>
</Box>
</Stack>
)}
{/* Defense Settings */}
<Box>
<Stack>
<Heading level={3} fontSize="sm" weight="semibold" color="text-white" mb={1}>
<Stack direction="row" align="center" gap={2}>
<Icon icon={Shield} size={4} color="text-primary-blue" />
@@ -196,8 +195,8 @@ export function LeagueStewardingSection({
Should accused drivers be required to submit a defense?
</Text>
<Box display="grid" gridCols={{ base: 1, sm: 2 }} gap={3}>
<Box
<Stack display="grid" gridCols={{ base: 1, sm: 2 }} gap={3}>
<Stack
as="button"
type="button"
disabled={readOnly}
@@ -217,16 +216,16 @@ export function LeagueStewardingSection({
opacity={readOnly ? 0.6 : 1}
cursor={readOnly ? 'not-allowed' : 'pointer'}
>
<Box w="4" h="4" rounded="full" border borderWidth="2px" display="flex" alignItems="center" justifyContent="center" borderColor={!stewarding.requireDefense ? 'border-primary-blue' : 'border-gray-500'}>
{!stewarding.requireDefense && <Box w="2" h="2" rounded="full" bg="bg-primary-blue" />}
</Box>
<Box>
<Stack w="4" h="4" rounded="full" border borderWidth="2px" display="flex" alignItems="center" justifyContent="center" borderColor={!stewarding.requireDefense ? 'border-primary-blue' : 'border-gray-500'}>
{!stewarding.requireDefense && <Stack w="2" h="2" rounded="full" bg="bg-primary-blue" />}
</Stack>
<Stack>
<Text size="sm" weight="medium" color="text-white" block>Defense optional</Text>
<Text size="xs" color="text-gray-400" block>Proceed without waiting for defense</Text>
</Box>
</Box>
</Stack>
</Stack>
<Box
<Stack
as="button"
type="button"
disabled={readOnly}
@@ -246,18 +245,18 @@ export function LeagueStewardingSection({
opacity={readOnly ? 0.6 : 1}
cursor={readOnly ? 'not-allowed' : 'pointer'}
>
<Box w="4" h="4" rounded="full" border borderWidth="2px" display="flex" alignItems="center" justifyContent="center" borderColor={stewarding.requireDefense ? 'border-primary-blue' : 'border-gray-500'}>
{stewarding.requireDefense && <Box w="2" h="2" rounded="full" bg="bg-primary-blue" />}
</Box>
<Box>
<Stack w="4" h="4" rounded="full" border borderWidth="2px" display="flex" alignItems="center" justifyContent="center" borderColor={stewarding.requireDefense ? 'border-primary-blue' : 'border-gray-500'}>
{stewarding.requireDefense && <Stack w="2" h="2" rounded="full" bg="bg-primary-blue" />}
</Stack>
<Stack>
<Text size="sm" weight="medium" color="text-white" block>Defense required</Text>
<Text size="xs" color="text-gray-400" block>Wait for defense before deciding</Text>
</Box>
</Box>
</Box>
</Stack>
</Stack>
</Stack>
{stewarding.requireDefense && (
<Box mt={4} p={4} rounded="xl" bg="bg-iron-gray/40" border borderColor="border-charcoal-outline">
<Stack mt={4} p={4} rounded="xl" bg="bg-iron-gray/40" border borderColor="border-charcoal-outline">
<Text as="label" size="xs" weight="medium" color="text-gray-400" block mb={1.5}>
Defense time limit
</Text>
@@ -275,12 +274,12 @@ export function LeagueStewardingSection({
<Text size="xs" color="text-gray-500" mt={2} block>
After this time, the decision can proceed without a defense
</Text>
</Box>
</Stack>
)}
</Box>
</Stack>
{/* Deadlines */}
<Box>
<Stack>
<Heading level={3} fontSize="sm" weight="semibold" color="text-white" mb={1}>
<Stack direction="row" align="center" gap={2}>
<Icon icon={Clock} size={4} color="text-primary-blue" />
@@ -291,8 +290,8 @@ export function LeagueStewardingSection({
Set time limits for filing protests and closing stewarding
</Text>
<Box display="grid" gridCols={{ base: 1, sm: 2 }} gap={4}>
<Box p={4} rounded="xl" bg="bg-iron-gray/40" border borderColor="border-charcoal-outline">
<Stack display="grid" gridCols={{ base: 1, sm: 2 }} gap={4}>
<Stack p={4} rounded="xl" bg="bg-iron-gray/40" border borderColor="border-charcoal-outline">
<Text as="label" size="xs" weight="medium" color="text-gray-400" block mb={1.5}>
Protest filing deadline (after race)
</Text>
@@ -311,9 +310,9 @@ export function LeagueStewardingSection({
<Text size="xs" color="text-gray-500" mt={2} block>
Drivers cannot file protests after this time
</Text>
</Box>
</Stack>
<Box p={4} rounded="xl" bg="bg-iron-gray/40" border borderColor="border-charcoal-outline">
<Stack p={4} rounded="xl" bg="bg-iron-gray/40" border borderColor="border-charcoal-outline">
<Text as="label" size="xs" weight="medium" color="text-gray-400" block mb={1.5}>
Stewarding closes (after race)
</Text>
@@ -331,12 +330,12 @@ export function LeagueStewardingSection({
<Text size="xs" color="text-gray-500" mt={2} block>
All stewarding must be concluded by this time
</Text>
</Box>
</Box>
</Box>
</Stack>
</Stack>
</Stack>
{/* Notifications */}
<Box>
<Stack>
<Heading level={3} fontSize="sm" weight="semibold" color="text-white" mb={1}>
<Stack direction="row" align="center" gap={2}>
<Icon icon={Bell} size={4} color="text-primary-blue" />
@@ -348,7 +347,7 @@ export function LeagueStewardingSection({
</Text>
<Stack gap={3}>
<Box
<Stack
p={4}
rounded="xl"
bg="bg-iron-gray/40"
@@ -364,14 +363,14 @@ export function LeagueStewardingSection({
onChange={(checked) => updateStewarding({ notifyAccusedOnProtest: checked })}
disabled={readOnly}
/>
<Box ml={7} mt={1}>
<Stack ml={7} mt={1}>
<Text size="xs" color="text-gray-400" block>
Send notification when a protest is filed against them
</Text>
</Box>
</Box>
</Stack>
</Stack>
<Box
<Stack
p={4}
rounded="xl"
bg="bg-iron-gray/40"
@@ -387,27 +386,27 @@ export function LeagueStewardingSection({
onChange={(checked) => updateStewarding({ notifyOnVoteRequired: checked })}
disabled={readOnly}
/>
<Box ml={7} mt={1}>
<Stack ml={7} mt={1}>
<Text size="xs" color="text-gray-400" block>
Send notification to stewards/members when their vote is needed
</Text>
</Box>
</Box>
</Stack>
</Stack>
</Stack>
</Box>
</Stack>
{/* Warning about strict settings */}
{stewarding.requireDefense && stewarding.decisionMode !== 'single_steward' && (
<Box display="flex" alignItems="start" gap={3} p={4} rounded="xl" bg="bg-warning-amber/10" border borderColor="border-warning-amber/20">
<Stack display="flex" alignItems="start" gap={3} p={4} rounded="xl" bg="bg-warning-amber/10" border borderColor="border-warning-amber/20">
<Icon icon={AlertTriangle} size={5} color="text-warning-amber" mt={0.5} />
<Box>
<Stack>
<Text size="sm" weight="medium" color="text-warning-amber" block>Strict settings enabled</Text>
<Text size="xs" color="text-warning-amber" opacity={0.8} mt={1} block>
Requiring defense and voting may delay penalty decisions. Make sure your stewards/members
are active enough to meet the deadlines.
</Text>
</Box>
</Box>
</Stack>
</Stack>
)}
</Stack>
);