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

59
apps/website/components/leagues/LeagueSchedule.tsx
View File

@@ -10,9 +10,8 @@ import type { LeagueScheduleRaceViewModel } from '@/lib/view-models/LeagueSchedu
import { StateContainer } from '@/components/shared/state/StateContainer';
import { useLeagueSchedule } from "@/hooks/league/useLeagueSchedule";
import { Calendar } 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 { Button } from '@/ui/Button';
@@ -102,11 +101,11 @@ export function LeagueSchedule({ leagueId, onRaceClick }: LeagueScheduleProps) {
return (
<Stack gap={4}>
{/* Filter Controls */}
<Box display="flex" alignItems="center" justifyContent="between">
<Stack display="flex" alignItems="center" justifyContent="between">
<Text size="sm" color="text-gray-400">
{displayRaces.length} {displayRaces.length === 1 ? 'race' : 'races'}
</Text>
<Box display="flex" gap={2}>
<Stack display="flex" gap={2}>
<Button
variant={filter === 'upcoming' ? 'primary' : 'secondary'}
size="sm"
@@ -128,17 +127,17 @@ export function LeagueSchedule({ leagueId, onRaceClick }: LeagueScheduleProps) {
>
All ({races.length})
</Button>
</Box>
</Box>
</Stack>
</Stack>
{/* Race List */}
{displayRaces.length === 0 ? (
<Box textAlign="center" py={8}>
<Stack textAlign="center" py={8}>
<Text color="text-gray-400" block mb={2}>No {filter} races</Text>
{filter === 'upcoming' && (
<Text size="sm" color="text-gray-500" block>Schedule your first race to get started</Text>
)}
</Box>
</Stack>
) : (
<Stack gap={3}>
{displayRaces.map((race) => {
@@ -152,7 +151,7 @@ export function LeagueSchedule({ leagueId, onRaceClick }: LeagueScheduleProps) {
registerMutation.isPending || withdrawMutation.isPending;
return (
<Box
<Stack
key={race.id}
p={4}
rounded="lg"
@@ -166,34 +165,34 @@ export function LeagueSchedule({ leagueId, onRaceClick }: LeagueScheduleProps) {
opacity={isPast ? 0.75 : 1}
onClick={() => onRaceClick?.(race.id)}
>
<Box display="flex" alignItems="center" justifyContent="between" gap={4}>
<Box flexGrow={1}>
<Box display="flex" alignItems="center" gap={2} mb={1} flexWrap="wrap">
<Stack display="flex" alignItems="center" justifyContent="between" gap={4}>
<Stack flexGrow={1}>
<Stack display="flex" alignItems="center" gap={2} mb={1} flexWrap="wrap">
<Heading level={3} fontSize="base" weight="medium" color="text-white">{trackLabel}</Heading>
{isUpcoming && !isRegistered && (
<Box as="span" px={2} py={0.5} bg="bg-primary-blue/10" border borderColor="border-primary-blue/30" rounded="sm">
<Stack as="span" px={2} py={0.5} bg="bg-primary-blue/10" border borderColor="border-primary-blue/30" rounded="sm">
<Text size="xs" weight="medium" color="text-primary-blue">Upcoming</Text>
</Box>
</Stack>
)}
{isUpcoming && isRegistered && (
<Box as="span" px={2} py={0.5} bg="bg-green-500/10" border borderColor="border-green-500/30" rounded="sm">
<Stack as="span" px={2} py={0.5} bg="bg-green-500/10" border borderColor="border-green-500/30" rounded="sm">
<Text size="xs" weight="medium" color="text-green-400">✓ Registered</Text>
</Box>
</Stack>
)}
{isPast && (
<Box as="span" px={2} py={0.5} bg="bg-gray-700/50" border borderColor="border-gray-600/50" rounded="sm">
<Stack as="span" px={2} py={0.5} bg="bg-gray-700/50" border borderColor="border-gray-600/50" rounded="sm">
<Text size="xs" weight="medium" color="text-gray-400">Completed</Text>
</Box>
</Stack>
)}
</Box>
</Stack>
<Text size="sm" color="text-gray-400" block>{carLabel}</Text>
<Box mt={2}>
<Stack mt={2}>
<Text size="xs" color="text-gray-500" transform="uppercase">{sessionTypeLabel}</Text>
</Box>
</Box>
</Stack>
</Stack>
<Box display="flex" alignItems="center" gap={3}>
<Box textAlign="right">
<Stack display="flex" alignItems="center" gap={3}>
<Stack textAlign="right">
<Text color="text-white" weight="medium" block>
{race.scheduledAt.toLocaleDateString('en-US', {
month: 'short',
@@ -210,11 +209,11 @@ export function LeagueSchedule({ leagueId, onRaceClick }: LeagueScheduleProps) {
{isPast && race.status === 'completed' && (
<Text size="xs" color="text-primary-blue" mt={1} block>View Results →</Text>
)}
</Box>
</Stack>
{/* Registration Actions */}
{isUpcoming && (
<Box onClick={(e: React.MouseEvent) => e.stopPropagation()}>
<Stack onClick={(e: React.MouseEvent) => e.stopPropagation()}>
{!isRegistered ? (
<Button
variant="primary"
@@ -239,11 +238,11 @@ export function LeagueSchedule({ leagueId, onRaceClick }: LeagueScheduleProps) {
{withdrawMutation.isPending ? 'Withdrawing...' : 'Withdraw'}
</Button>
)}
</Box>
</Stack>
)}
</Box>
</Box>
</Box>
</Stack>
</Stack>
</Stack>
);
})}
</Stack>