website refactor
This commit is contained in:
67
apps/website/components/races/EntrantsTable.tsx
Normal file
67
apps/website/components/races/EntrantsTable.tsx
Normal file
@@ -0,0 +1,67 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import { Text } from '@/ui/Text';
|
||||
import { Table, TableHead, TableBody, TableRow, TableHeader, TableCell } from '@/ui/Table';
|
||||
import { Badge } from '@/ui/Badge';
|
||||
|
||||
interface Entrant {
|
||||
id: string;
|
||||
name: string;
|
||||
teamName?: string;
|
||||
carName: string;
|
||||
rating: number;
|
||||
status: 'confirmed' | 'withdrawn' | 'pending';
|
||||
}
|
||||
|
||||
interface EntrantsTableProps {
|
||||
entrants: Entrant[];
|
||||
}
|
||||
|
||||
export function EntrantsTable({ entrants }: EntrantsTableProps) {
|
||||
return (
|
||||
<Table>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableHeader>Driver</TableHeader>
|
||||
<TableHeader>Team</TableHeader>
|
||||
<TableHeader>Car</TableHeader>
|
||||
<TableHeader textAlign="right">Rating</TableHeader>
|
||||
<TableHeader textAlign="right">Status</TableHeader>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{entrants.map((entrant) => (
|
||||
<TableRow key={entrant.id}>
|
||||
<TableCell>
|
||||
<Text size="sm" weight="bold">{entrant.name}</Text>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Text size="xs" color="text-gray-400">{entrant.teamName || '-'}</Text>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Text size="xs" color="text-gray-400">{entrant.carName}</Text>
|
||||
</TableCell>
|
||||
<TableCell textAlign="right">
|
||||
<Text size="xs" font="mono" color="text-telemetry-aqua">{entrant.rating}</Text>
|
||||
</TableCell>
|
||||
<TableCell textAlign="right">
|
||||
<Badge
|
||||
variant={
|
||||
entrant.status === 'confirmed'
|
||||
? 'success'
|
||||
: entrant.status === 'withdrawn'
|
||||
? 'danger'
|
||||
: 'warning'
|
||||
}
|
||||
size="sm"
|
||||
>
|
||||
{entrant.status.toUpperCase()}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
);
|
||||
}
|
||||
91
apps/website/components/races/RaceCard.tsx
Normal file
91
apps/website/components/races/RaceCard.tsx
Normal file
@@ -0,0 +1,91 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import { Clock, MapPin, Users } from 'lucide-react';
|
||||
import { Text } from '@/ui/Text';
|
||||
import { Stack } from '@/ui/Stack';
|
||||
import { Icon } from '@/ui/Icon';
|
||||
import { Box } from '@/ui/Box';
|
||||
import { SessionStatusBadge, type SessionStatus } from './SessionStatusBadge';
|
||||
|
||||
interface RaceCardProps {
|
||||
id: string;
|
||||
title: string;
|
||||
leagueName: string;
|
||||
trackName: string;
|
||||
scheduledAt: string;
|
||||
entrantCount: number;
|
||||
status: SessionStatus;
|
||||
onClick: (id: string) => void;
|
||||
}
|
||||
|
||||
export function RaceCard({
|
||||
id,
|
||||
title,
|
||||
leagueName,
|
||||
trackName,
|
||||
scheduledAt,
|
||||
entrantCount,
|
||||
status,
|
||||
onClick,
|
||||
}: RaceCardProps) {
|
||||
return (
|
||||
<Box
|
||||
as="article"
|
||||
onClick={() => onClick(id)}
|
||||
bg="bg-surface-charcoal"
|
||||
border
|
||||
borderColor="border-outline-steel"
|
||||
p={4}
|
||||
hoverBorderColor="border-primary-accent"
|
||||
transition
|
||||
cursor="pointer"
|
||||
position="relative"
|
||||
overflow="hidden"
|
||||
group
|
||||
>
|
||||
{/* Hover Glow */}
|
||||
<Box
|
||||
position="absolute"
|
||||
inset="0"
|
||||
bg="bg-primary-accent"
|
||||
bgOpacity={0.05}
|
||||
opacity={0}
|
||||
groupHoverOpacity={1}
|
||||
transition
|
||||
/>
|
||||
|
||||
<Stack gap={4}>
|
||||
<Stack direction="row" justifyContent="between" alignItems="start">
|
||||
<Stack gap={1}>
|
||||
<Text size="xs" color="text-gray-500" weight="bold" uppercase>
|
||||
{leagueName}
|
||||
</Text>
|
||||
<Text size="lg" weight="bold" groupHoverTextColor="text-primary-accent">
|
||||
{title}
|
||||
</Text>
|
||||
</Stack>
|
||||
<SessionStatusBadge status={status} />
|
||||
</Stack>
|
||||
|
||||
<Box display="grid" gridCols={2} gap={4}>
|
||||
<Stack direction="row" alignItems="center" gap={2}>
|
||||
<Icon icon={MapPin} size={3} color="#6b7280" />
|
||||
<Text size="xs" color="text-gray-400">{trackName}</Text>
|
||||
</Stack>
|
||||
<Stack direction="row" alignItems="center" gap={2}>
|
||||
<Icon icon={Clock} size={3} color="#6b7280" />
|
||||
<Text size="xs" color="text-gray-400">{scheduledAt}</Text>
|
||||
</Stack>
|
||||
</Box>
|
||||
|
||||
<Stack direction="row" alignItems="center" gap={2} pt={2} borderTop borderColor="border-outline-steel" bgOpacity={0.5}>
|
||||
<Icon icon={Users} size={3} color="#4ED4E0" />
|
||||
<Text size="xs" color="text-gray-400">
|
||||
<Text as="span" color="text-telemetry-aqua" weight="bold">{entrantCount}</Text> ENTRANTS
|
||||
</Text>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
73
apps/website/components/races/RaceDetailsHeader.tsx
Normal file
73
apps/website/components/races/RaceDetailsHeader.tsx
Normal file
@@ -0,0 +1,73 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import { ChevronLeft, Calendar, MapPin } from 'lucide-react';
|
||||
import { Heading } from '@/ui/Heading';
|
||||
import { Text } from '@/ui/Text';
|
||||
import { Stack } from '@/ui/Stack';
|
||||
import { Icon } from '@/ui/Icon';
|
||||
import { Box } from '@/ui/Box';
|
||||
import { SessionStatusBadge, type SessionStatus } from './SessionStatusBadge';
|
||||
|
||||
interface RaceDetailsHeaderProps {
|
||||
title: string;
|
||||
leagueName: string;
|
||||
trackName: string;
|
||||
scheduledAt: string;
|
||||
status: SessionStatus;
|
||||
onBack: () => void;
|
||||
}
|
||||
|
||||
export function RaceDetailsHeader({
|
||||
title,
|
||||
leagueName,
|
||||
trackName,
|
||||
scheduledAt,
|
||||
status,
|
||||
onBack,
|
||||
}: RaceDetailsHeaderProps) {
|
||||
return (
|
||||
<Box as="header" bg="bg-surface-charcoal" borderBottom borderColor="border-outline-steel" p={6}>
|
||||
<Stack gap={6}>
|
||||
<Box
|
||||
as="button"
|
||||
onClick={onBack}
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
gap={2}
|
||||
color="text-gray-500"
|
||||
hoverTextColor="text-primary-accent"
|
||||
transition
|
||||
group
|
||||
>
|
||||
<Icon icon={ChevronLeft} size={4} groupHoverScale />
|
||||
<Text size="xs" weight="bold" uppercase>Back to Schedule</Text>
|
||||
</Box>
|
||||
|
||||
<Stack direction="row" justifyContent="between" alignItems="end">
|
||||
<Stack gap={2}>
|
||||
<Text size="xs" color="text-primary-accent" weight="bold" uppercase>
|
||||
{leagueName}
|
||||
</Text>
|
||||
<Heading level={1}>{title}</Heading>
|
||||
|
||||
<Box display="flex" flexWrap="wrap" gap={6} mt={2}>
|
||||
<Stack direction="row" alignItems="center" gap={2}>
|
||||
<Icon icon={MapPin} size={4} color="#6b7280" />
|
||||
<Text size="sm" color="text-gray-300">{trackName}</Text>
|
||||
</Stack>
|
||||
<Stack direction="row" alignItems="center" gap={2}>
|
||||
<Icon icon={Calendar} size={4} color="#6b7280" />
|
||||
<Text size="sm" color="text-gray-300">{scheduledAt}</Text>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Stack>
|
||||
|
||||
<Box pb={2}>
|
||||
<SessionStatusBadge status={status} />
|
||||
</Box>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
63
apps/website/components/races/RaceScheduleTable.tsx
Normal file
63
apps/website/components/races/RaceScheduleTable.tsx
Normal file
@@ -0,0 +1,63 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import { Text } from '@/ui/Text';
|
||||
import { Table, TableHead, TableBody, TableRow, TableHeader, TableCell } from '@/ui/Table';
|
||||
import { SessionStatusBadge, type SessionStatus } from './SessionStatusBadge';
|
||||
|
||||
interface RaceRow {
|
||||
id: string;
|
||||
track: string;
|
||||
car: string;
|
||||
leagueName: string | null;
|
||||
time: string;
|
||||
status: SessionStatus;
|
||||
}
|
||||
|
||||
interface RaceScheduleTableProps {
|
||||
races: RaceRow[];
|
||||
onRaceClick: (id: string) => void;
|
||||
}
|
||||
|
||||
export function RaceScheduleTable({ races, onRaceClick }: RaceScheduleTableProps) {
|
||||
return (
|
||||
<Table>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableHeader>Time</TableHeader>
|
||||
<TableHeader>Track</TableHeader>
|
||||
<TableHeader>Car</TableHeader>
|
||||
<TableHeader>League</TableHeader>
|
||||
<TableHeader textAlign="right">Status</TableHeader>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{races.map((race) => (
|
||||
<TableRow
|
||||
key={race.id}
|
||||
onClick={() => onRaceClick(race.id)}
|
||||
clickable
|
||||
>
|
||||
<TableCell>
|
||||
<Text size="xs" color="text-telemetry-aqua" weight="bold">{race.time}</Text>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Text size="sm" weight="bold" groupHoverTextColor="text-primary-accent">
|
||||
{race.track}
|
||||
</Text>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Text size="xs" color="text-gray-400">{race.car}</Text>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Text size="xs" color="text-gray-400">{race.leagueName || 'Official'}</Text>
|
||||
</TableCell>
|
||||
<TableCell textAlign="right">
|
||||
<SessionStatusBadge status={race.status} />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
);
|
||||
}
|
||||
78
apps/website/components/races/RacesHeader.tsx
Normal file
78
apps/website/components/races/RacesHeader.tsx
Normal file
@@ -0,0 +1,78 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import { Flag, CalendarDays, Clock, Zap, Trophy, type LucideIcon } from 'lucide-react';
|
||||
import { Heading } from '@/ui/Heading';
|
||||
import { Text } from '@/ui/Text';
|
||||
import { Stack } from '@/ui/Stack';
|
||||
import { Box } from '@/ui/Box';
|
||||
import { Icon } from '@/ui/Icon';
|
||||
import { Grid } from '@/ui/Grid';
|
||||
|
||||
interface RacesHeaderProps {
|
||||
totalCount: number;
|
||||
scheduledCount: number;
|
||||
runningCount: number;
|
||||
completedCount: number;
|
||||
}
|
||||
|
||||
export function RacesHeader({
|
||||
totalCount,
|
||||
scheduledCount,
|
||||
runningCount,
|
||||
completedCount,
|
||||
}: RacesHeaderProps) {
|
||||
return (
|
||||
<Box as="header" bg="bg-surface-charcoal" rounded="xl" border borderColor="border-outline-steel" p={6} position="relative" overflow="hidden">
|
||||
{/* Background Accent */}
|
||||
<Box position="absolute" top={0} left={0} right={0} h="1" bg="bg-primary-accent" />
|
||||
|
||||
<Stack gap={6}>
|
||||
<Stack gap={2}>
|
||||
<Stack direction="row" align="center" gap={3}>
|
||||
<Icon icon={Flag} size={6} color="var(--color-primary)" />
|
||||
<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-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>
|
||||
</Stack>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
function StatItem({
|
||||
icon,
|
||||
label,
|
||||
value,
|
||||
color = 'text-white'
|
||||
}: {
|
||||
icon: LucideIcon,
|
||||
label: string,
|
||||
value: number,
|
||||
color?: string
|
||||
}) {
|
||||
return (
|
||||
<Box 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}
|
||||
/>
|
||||
<Text size="xs" color="text-gray-500" weight="bold" uppercase>{label}</Text>
|
||||
</Stack>
|
||||
<Text size="2xl" weight="bold" color={color}>{value}</Text>
|
||||
</Stack>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
43
apps/website/components/races/SessionStatusBadge.tsx
Normal file
43
apps/website/components/races/SessionStatusBadge.tsx
Normal file
@@ -0,0 +1,43 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import { Badge } from '@/ui/Badge';
|
||||
|
||||
export type SessionStatus = 'scheduled' | 'running' | 'completed' | 'cancelled' | 'delayed';
|
||||
|
||||
interface SessionStatusBadgeProps {
|
||||
status: SessionStatus;
|
||||
}
|
||||
|
||||
export function SessionStatusBadge({ status }: SessionStatusBadgeProps) {
|
||||
const config: Record<SessionStatus, { label: string; variant: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info' }> = {
|
||||
scheduled: {
|
||||
label: 'SCHEDULED',
|
||||
variant: 'primary',
|
||||
},
|
||||
running: {
|
||||
label: 'LIVE',
|
||||
variant: 'success',
|
||||
},
|
||||
completed: {
|
||||
label: 'COMPLETED',
|
||||
variant: 'default',
|
||||
},
|
||||
cancelled: {
|
||||
label: 'CANCELLED',
|
||||
variant: 'danger',
|
||||
},
|
||||
delayed: {
|
||||
label: 'DELAYED',
|
||||
variant: 'warning',
|
||||
},
|
||||
};
|
||||
|
||||
const { label, variant } = config[status] || config.scheduled;
|
||||
|
||||
return (
|
||||
<Badge variant={variant} size="sm">
|
||||
{label}
|
||||
</Badge>
|
||||
);
|
||||
}
|
||||
86
apps/website/components/races/TrackConditionsPanel.tsx
Normal file
86
apps/website/components/races/TrackConditionsPanel.tsx
Normal file
@@ -0,0 +1,86 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import { Thermometer, Wind, Droplets, Sun, type LucideIcon } from 'lucide-react';
|
||||
import { Text } from '@/ui/Text';
|
||||
import { Stack } from '@/ui/Stack';
|
||||
import { Icon } from '@/ui/Icon';
|
||||
import { Box } from '@/ui/Box';
|
||||
|
||||
interface TrackConditionsPanelProps {
|
||||
airTemp: string;
|
||||
trackTemp: string;
|
||||
humidity: string;
|
||||
windSpeed: string;
|
||||
weatherType: string;
|
||||
}
|
||||
|
||||
export function TrackConditionsPanel({
|
||||
airTemp,
|
||||
trackTemp,
|
||||
humidity,
|
||||
windSpeed,
|
||||
weatherType,
|
||||
}: TrackConditionsPanelProps) {
|
||||
return (
|
||||
<Box as="section" bg="bg-surface-charcoal" border borderColor="border-outline-steel" p={4}>
|
||||
<Text size="xs" weight="bold" color="text-gray-500" uppercase block mb={4}>
|
||||
Track Conditions
|
||||
</Text>
|
||||
|
||||
<Box display="grid" gridCols={2} mdCols={4} gap={4}>
|
||||
<ConditionItem
|
||||
icon={Thermometer}
|
||||
label="Air Temp"
|
||||
value={airTemp}
|
||||
color="text-warning-amber"
|
||||
/>
|
||||
<ConditionItem
|
||||
icon={Thermometer}
|
||||
label="Track Temp"
|
||||
value={trackTemp}
|
||||
color="text-critical-red"
|
||||
/>
|
||||
<ConditionItem
|
||||
icon={Droplets}
|
||||
label="Humidity"
|
||||
value={humidity}
|
||||
color="text-telemetry-aqua"
|
||||
/>
|
||||
<ConditionItem
|
||||
icon={Wind}
|
||||
label="Wind"
|
||||
value={windSpeed}
|
||||
color="text-gray-400"
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Box mt={4} pt={4} borderTop borderColor="border-outline-steel" bgOpacity={0.5} display="flex" alignItems="center" gap={3}>
|
||||
<Icon icon={Sun} size={4} color="#FFBE4D" />
|
||||
<Text size="sm" color="text-gray-300">{weatherType}</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
function ConditionItem({
|
||||
icon,
|
||||
label,
|
||||
value,
|
||||
color
|
||||
}: {
|
||||
icon: LucideIcon,
|
||||
label: string,
|
||||
value: string,
|
||||
color: string
|
||||
}) {
|
||||
return (
|
||||
<Stack gap={1}>
|
||||
<Stack direction="row" alignItems="center" gap={2}>
|
||||
<Icon icon={icon} size={3} color="#6b7280" />
|
||||
<Text size="xs" color="text-gray-500" weight="bold" uppercase>{label}</Text>
|
||||
</Stack>
|
||||
<Text size="lg" weight="bold" color={color}>{value}</Text>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user