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-17 15:46:55 +01:00
parent 4d5ce9bfd6
commit 72a626ce71
346 changed files with 19308 additions and 8605 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
apps/website/ui/RacePageHeader.tsx
View File

@@ -1,13 +1,12 @@
import React from 'react';
import { Flag, CalendarDays, Clock, Zap, Trophy } from 'lucide-react';
import { Flag, CalendarDays, Clock, Zap, Trophy, LucideIcon } from 'lucide-react';
import { Heading } from '@/ui/Heading';
import { Text } from '@/ui/Text';
import { Hero } from '@/ui/Hero';
import { Stack } from '@/ui/Stack';
import { Box } from '@/ui/Box';
import { Icon } from '@/ui/Icon';
import { Grid } from '@/ui/Grid';
import { StatBox } from '@/ui/StatBox';
import { Surface } from '@/ui/Surface';
interface RacePageHeaderProps {
totalCount: number;
@@ -23,26 +22,57 @@ export function RacePageHeader({
completedCount,
}: RacePageHeaderProps) {
return (
<Hero variant="primary">
<Stack gap={2}>
<Stack direction="row" align="center" gap={3}>
<Box p={2} bg="bg-primary-blue/10" rounded="lg">
<Icon icon={Flag} size={6} color="rgb(59, 130, 246)" />
</Box>
<Heading level={1}>Race Calendar</Heading>
</Stack>
<Text color="text-gray-400" maxWidth="42rem">
Track upcoming races, view live events, and explore results across all your leagues.
</Text>
</Stack>
<Surface
bg="bg-panel-gray"
rounded="xl"
border
borderColor="border-charcoal-outline"
padding={6}
position="relative"
overflow="hidden"
>
{/* Background Accent */}
<Box
position="absolute"
top={0}
left={0}
right={0}
height="1"
bg="bg-primary-blue"
/>
{/* Quick Stats */}
<Grid cols={2} mdCols={4} gap={4} mt={6}>
<StatBox icon={CalendarDays} label="Total" value={totalCount} />
<StatBox icon={Clock} label="Scheduled" value={scheduledCount} color="rgb(59, 130, 246)" />
<StatBox icon={Zap} label="Live Now" value={runningCount} color="rgb(16, 185, 129)" />
<StatBox icon={Trophy} label="Completed" value={completedCount} />
</Grid>
</Hero>
<Stack gap={6}>
<Stack gap={2}>
<Stack direction="row" align="center" gap={3}>
<Icon icon={Flag} size={6} color="#198CFF" />
<Heading level={1}>RACE DASHBOARD</Heading>
</Stack>
<Text color="text-gray-400" size="sm">
Precision tracking for upcoming sessions and live events.
</Text>
</Stack>
<Grid cols={2} mdCols={4} gap={4}>
<StatItem icon={CalendarDays} label="TOTAL SESSIONS" value={totalCount} />
<StatItem icon={Clock} label="SCHEDULED" value={scheduledCount} color="text-primary-blue" />
<StatItem icon={Zap} label="LIVE NOW" value={runningCount} color="text-performance-green" />
<StatItem icon={Trophy} label="COMPLETED" value={completedCount} color="text-gray-400" />
</Grid>
</Stack>
</Surface>
);
}
function StatItem({ icon, label, value, color = 'text-white' }: { icon: LucideIcon, label: string, value: number, color?: string }) {
return (
<Box p={4} bg="bg-graphite-black/50" border borderColor="border-charcoal-outline">
<Stack gap={1}>
<Stack direction="row" align="center" gap={2}>
<Icon icon={icon} size={3} color={color === 'text-white' ? '#9ca3af' : undefined} className={color !== 'text-white' ? color : ''} />
<Text size="xs" color="text-gray-500" weight="bold" uppercase>{label}</Text>
</Stack>
<Text size="2xl" weight="bold" className={color}>{value}</Text>
</Stack>
</Box>
);
}