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

47
apps/website/components/leagues/LeagueSchedulePanel.tsx
View File

@@ -1,7 +1,6 @@
'use client';
import React from 'react';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Heading } from '@/ui/Heading';
@@ -22,10 +21,10 @@ interface LeagueSchedulePanelProps {
export function LeagueSchedulePanel({ events }: LeagueSchedulePanelProps) {
return (
<Box as="section">
<Stack as="section">
<Stack gap={4}>
{events.map((event) => (
<Box
<Stack
as="article"
key={event.id}
display="flex"
@@ -38,56 +37,56 @@ export function LeagueSchedulePanel({ events }: LeagueSchedulePanelProps) {
hoverBorderColor="zinc-700"
transition
>
<Box display="flex" flexDirection="col" alignItems="center" justifyContent="center" w="16" h="16" borderRight borderColor="zinc-800" pr={6}>
<Stack display="flex" flexDirection="col" alignItems="center" justifyContent="center" w="16" h="16" borderRight borderColor="zinc-800" pr={6}>
<Text size="xs" weight="bold" color="text-zinc-500" uppercase>
{new Date(event.date).toLocaleDateString('en-US', { month: 'short' })}
</Text>
<Text size="2xl" weight="bold" color="text-white">
{new Date(event.date).toLocaleDateString('en-US', { day: 'numeric' })}
</Text>
</Box>
</Stack>
<Box flexGrow={1}>
<Stack flexGrow={1}>
<Heading level={3} fontSize="lg" weight="bold" color="text-white">{event.title}</Heading>
<Stack direction="row" gap={4} mt={1}>
<Box display="flex" alignItems="center" gap={1.5}>
<Box color="text-zinc-600"><MapPin size={14} /></Box>
<Stack display="flex" alignItems="center" gap={1.5}>
<Stack color="text-zinc-600"><MapPin size={14} /></Stack>
<Text size="sm" color="text-zinc-400">{event.trackName}</Text>
</Box>
<Box display="flex" alignItems="center" gap={1.5}>
<Box color="text-zinc-600"><Clock size={14} /></Box>
</Stack>
<Stack display="flex" alignItems="center" gap={1.5}>
<Stack color="text-zinc-600"><Clock size={14} /></Stack>
<Text size="sm" color="text-zinc-400">{event.time}</Text>
</Box>
</Stack>
</Stack>
</Box>
</Stack>
<Box display="flex" alignItems="center" gap={3}>
<Stack display="flex" alignItems="center" gap={3}>
{event.status === 'live' && (
<Box display="flex" alignItems="center" gap={1.5} px={2} py={1} bg="red-500/10" border borderColor="red-500/20">
<Box w="1.5" h="1.5" rounded="full" bg="bg-red-500" animate="pulse" />
<Stack display="flex" alignItems="center" gap={1.5} px={2} py={1} bg="red-500/10" border borderColor="red-500/20">
<Stack w="1.5" h="1.5" rounded="full" bg="bg-red-500" animate="pulse" />
<Text size="xs" weight="bold" color="text-red-500" uppercase letterSpacing="0.05em">
Live
</Text>
</Box>
</Stack>
)}
{event.status === 'upcoming' && (
<Box px={2} py={1} bg="blue-500/10" border borderColor="blue-500/20">
<Stack px={2} py={1} bg="blue-500/10" border borderColor="blue-500/20">
<Text size="xs" weight="bold" color="text-blue-500" uppercase letterSpacing="0.05em">
Upcoming
</Text>
</Box>
</Stack>
)}
{event.status === 'completed' && (
<Box px={2} py={1} bg="zinc-800" border borderColor="zinc-700">
<Stack px={2} py={1} bg="zinc-800" border borderColor="zinc-700">
<Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="0.05em">
Results
</Text>
</Box>
</Stack>
)}
</Box>
</Box>
</Stack>
</Stack>
))}
</Stack>
</Box>
</Stack>
);
}