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 22:55:55 +01:00
parent b43a23a48c
commit aeaa43f4d3
179 changed files with 4736 additions and 6832 deletions
Download Patch File Download Diff File Expand all files Collapse all files

148
apps/website/components/races/RaceSidebar.tsx
View File

@@ -1,13 +1,14 @@
'use client';
import { SidebarRaceItem } from '@/components/races/SidebarRaceItem';
import { routes } from '@/lib/routing/RouteConfig';
import type { RaceViewData } from '@/lib/view-data/RacesViewData';
import { Card } from '@/ui/Card';
import { Heading } from '@/ui/Heading';
import { Panel } from '@/ui/Panel';
import { Icon } from '@/ui/Icon';
import { Stack } from '@/ui/primitives/Stack';
import { SidebarActionLink } from '@/ui/SidebarActionLink';
import { Text } from '@/ui/Text';
import { Clock, Trophy, Users } from 'lucide-react';
import React from 'react';
interface RaceSidebarProps {
upcomingRaces: RaceViewData[];
@@ -17,88 +18,73 @@ interface RaceSidebarProps {
export function RaceSidebar({ upcomingRaces, recentResults, onRaceClick }: RaceSidebarProps) {
return (
<Stack gap={6}>
<div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
{/* Upcoming This Week */}
<Card>
<Stack gap={4}>
<Stack direction="row" align="center" justify="between">
<Heading level={3} icon={<Icon icon={Clock} size={4} color="var(--primary-accent)" />}>
Next Up
</Heading>
<Text size="xs" color="text-gray-500">This week</Text>
</Stack>
{upcomingRaces.length === 0 ? (
<Stack py={4} textAlign="center">
<Text size="sm" color="text-gray-400">No races scheduled this week</Text>
</Stack>
) : (
<Stack gap={3}>
{upcomingRaces.map((race) => (
<SidebarRaceItem
key={race.id}
race={{
id: race.id,
track: race.track,
scheduledAt: race.scheduledAt
}}
onClick={() => onRaceClick(race.id)}
/>
))}
</Stack>
)}
</Stack>
</Card>
<Panel
title="Next Up"
description="This week"
>
{upcomingRaces.length === 0 ? (
<div style={{ padding: '1rem 0', textAlign: 'center' }}>
<Text size="sm" variant="low">No races scheduled this week</Text>
</div>
) : (
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
{upcomingRaces.map((race) => (
<SidebarRaceItem
key={race.id}
race={{
id: race.id,
track: race.track,
scheduledAt: race.scheduledAt
}}
onClick={() => onRaceClick(race.id)}
/>
))}
</div>
)}
</Panel>
{/* Recent Results */}
<Card>
<Stack gap={4}>
<Heading level={3} icon={<Icon icon={Trophy} size={4} color="var(--warning-amber)" />}>
Recent Results
</Heading>
{recentResults.length === 0 ? (
<Stack py={4} textAlign="center">
<Text size="sm" color="text-gray-400">No completed races yet</Text>
</Stack>
) : (
<Stack gap={3}>
{recentResults.map((race) => (
<SidebarRaceItem
key={race.id}
race={{
id: race.id,
track: race.track,
scheduledAt: race.scheduledAt
}}
onClick={() => onRaceClick(race.id)}
/>
))}
</Stack>
)}
</Stack>
</Card>
<Panel
title="Recent Results"
>
{recentResults.length === 0 ? (
<div style={{ padding: '1rem 0', textAlign: 'center' }}>
<Text size="sm" variant="low">No completed races yet</Text>
</div>
) : (
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
{recentResults.map((race) => (
<SidebarRaceItem
key={race.id}
race={{
id: race.id,
track: race.track,
scheduledAt: race.scheduledAt
}}
onClick={() => onRaceClick(race.id)}
/>
))}
</div>
)}
</Panel>
{/* Quick Actions */}
<Card>
<Stack gap={4}>
<Heading level={3}>Quick Actions</Heading>
<Stack gap={2}>
<SidebarActionLink
href={routes.public.leagues}
icon={Users}
label="Browse Leagues"
/>
<SidebarActionLink
href={routes.public.leaderboards}
icon={Trophy}
label="View Leaderboards"
iconColor="text-warning-amber"
iconBgColor="bg-warning-amber/10"
/>
</Stack>
</Stack>
</Card>
</Stack>
<Panel title="Quick Actions">
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
<SidebarActionLink
href={routes.public.leagues}
icon={Users}
label="Browse Leagues"
/>
<SidebarActionLink
href={routes.public.leaderboards}
icon={Trophy}
label="View Leaderboards"
/>
</div>
</Panel>
</div>
);
}