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-20 18:28:11 +01:00
parent b39b098e6b
commit 444afda435
24 changed files with 971 additions and 277 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
apps/website/components/races/RacePageHeader.tsx
View File

@@ -4,7 +4,7 @@ import { Heading } from '@/ui/Heading';
import { Icon } from '@/ui/Icon';
import { Grid } from '@/ui/Grid';
import { Stack } from '@/ui/Stack';
import { Surface } from '@/ui/Surface';
import { Panel } from '@/ui/Panel';
import { Text } from '@/ui/Text';
import { CalendarDays, Clock, Flag, LucideIcon, Trophy, Zap } from 'lucide-react';
@@ -22,57 +22,50 @@ export function RacePageHeader({
completedCount,
}: RacePageHeaderProps) {
return (
<Surface
bg="bg-surface-charcoal"
rounded="xl"
border
borderColor="border-outline-steel"
padding={6}
position="relative"
overflow="hidden"
<Panel
variant="precision"
padding="lg"
>
{/* Background Accent */}
<Stack
position="absolute"
top={0}
left={0}
right={0}
height="1"
bg="bg-primary-accent"
/>
<Stack gap={6}>
<Stack gap={8}>
<Stack gap={2}>
<Stack direction="row" align="center" gap={3}>
<Icon icon={Flag} size={6} color="var(--primary-accent)" />
<Heading level={1}>RACE DASHBOARD</Heading>
<Icon icon={Flag} size={6} intent="primary" />
<Heading level={1} uppercase weight="bold">Race Dashboard</Heading>
</Stack>
<Text color="text-gray-400" size="sm">
<Text variant="low" 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-accent" />
<StatItem icon={Zap} label="LIVE NOW" value={runningCount} color="text-success-green" />
<StatItem icon={Trophy} label="COMPLETED" value={completedCount} color="text-gray-400" />
<Grid cols={2} mdCols={4} gap={6}>
<StatItem icon={CalendarDays} label="Total Sessions" value={totalCount} />
<StatItem icon={Clock} label="Scheduled" value={scheduledCount} variant="primary" />
<StatItem icon={Zap} label="Live Now" value={runningCount} variant="success" />
<StatItem icon={Trophy} label="Completed" value={completedCount} variant="low" />
</Grid>
</Stack>
</Surface>
</Panel>
);
}
function StatItem({ icon, label, value, color = 'text-white' }: { icon: LucideIcon, label: string, value: number, color?: string }) {
function StatItem({
icon,
label,
value,
variant = 'high'
}: {
icon: LucideIcon,
label: string,
value: number,
variant?: 'high' | 'low' | 'primary' | 'success' | 'warning' | 'critical'
}) {
return (
<Stack p={4} bg="bg-base-black" bgOpacity={0.5} border borderColor="border-outline-steel">
<Stack gap={1}>
<Stack direction="row" align="center" gap={2}>
<Icon icon={icon} size={3} color={color === 'text-white' ? '#9ca3af' : undefined} groupHoverTextColor={color !== 'text-white' ? color : undefined} />
<Text size="xs" color="text-gray-500" weight="bold" uppercase>{label}</Text>
</Stack>
<Text size="2xl" weight="bold" color={color}>{value}</Text>
<Stack gap={2}>
<Stack direction="row" align="center" gap={2}>
<Icon icon={icon} size={3} intent={variant === 'high' ? 'low' : variant} />
<Text size="xs" variant="low" weight="bold" uppercase letterSpacing="widest">{label}</Text>
</Stack>
<Text size="3xl" weight="bold" variant={variant} mono>{value}</Text>
</Stack>
);
}