website refactor
This commit is contained in:
@@ -1,12 +1,13 @@
|
||||
'use client';
|
||||
|
||||
import { Badge } from '@/ui/Badge';
|
||||
import { Heading } from '@/ui/Heading';
|
||||
import { Icon } from '@/ui/Icon';
|
||||
import { Link } from '@/ui/Link';
|
||||
import { Stack } from '@/ui/primitives/Stack';
|
||||
import { Text } from '@/ui/Text';
|
||||
import { ArrowRight, Car, ChevronRight, LucideIcon, Trophy, Zap } from 'lucide-react';
|
||||
import { RaceCard, RaceTimeColumn, RaceInfo } from '@/ui/RaceCard';
|
||||
import { Car, Trophy, Zap, ArrowRight } from 'lucide-react';
|
||||
import React from 'react';
|
||||
import { LucideIcon } from 'lucide-react';
|
||||
|
||||
interface RaceListItemProps {
|
||||
track: string;
|
||||
@@ -41,103 +42,52 @@ export function RaceListItem({
|
||||
onClick,
|
||||
statusConfig,
|
||||
}: RaceListItemProps) {
|
||||
const StatusIcon = statusConfig.icon;
|
||||
const isLive = status === 'running';
|
||||
|
||||
return (
|
||||
<Stack
|
||||
onClick={onClick}
|
||||
position="relative"
|
||||
overflow="hidden"
|
||||
rounded="xl"
|
||||
bg="bg-surface-charcoal"
|
||||
border
|
||||
borderColor="border-outline-steel"
|
||||
p={4}
|
||||
cursor="pointer"
|
||||
transition
|
||||
hoverScale
|
||||
group
|
||||
>
|
||||
{/* Live indicator */}
|
||||
{status === 'running' && (
|
||||
<Stack
|
||||
position="absolute"
|
||||
top="0"
|
||||
left="0"
|
||||
right="0"
|
||||
h="1"
|
||||
bg="bg-success-green"
|
||||
animate="pulse"
|
||||
/>
|
||||
)}
|
||||
<RaceCard onClick={onClick} isLive={isLive}>
|
||||
<RaceTimeColumn
|
||||
date={dateLabel}
|
||||
time={dayLabel || timeLabel || ''}
|
||||
relativeTime={relativeTimeLabel || timeLabel}
|
||||
isLive={isLive}
|
||||
/>
|
||||
|
||||
<Stack direction="row" align="center" gap={4}>
|
||||
{/* Time/Date Column */}
|
||||
<Stack flexShrink={0} textAlign="center" width="16">
|
||||
{dateLabel && (
|
||||
<Text size="xs" color="text-gray-500" block uppercase>
|
||||
{dateLabel}
|
||||
</Text>
|
||||
)}
|
||||
<Text size={dayLabel ? "2xl" : "lg"} weight="bold" color="text-white" block>
|
||||
{dayLabel || timeLabel}
|
||||
</Text>
|
||||
<Text size="xs" color={status === 'running' ? 'text-success-green' : 'text-gray-400'} block>
|
||||
{status === 'running' ? 'LIVE' : relativeTimeLabel || timeLabel}
|
||||
</Text>
|
||||
</Stack>
|
||||
<div style={{ width: '1px', height: '2.5rem', backgroundColor: 'var(--ui-color-border-muted)', opacity: 0.2 }} />
|
||||
|
||||
{/* Divider */}
|
||||
<Stack w="px" h="10" alignSelf="stretch" bg="border-outline-steel" />
|
||||
|
||||
{/* Main Content */}
|
||||
<Stack flexGrow={1} minWidth="0">
|
||||
<Stack direction="row" align="start" justify="between" gap={4}>
|
||||
<Stack minWidth="0">
|
||||
<Heading level={3} truncate groupHoverTextColor="text-primary-accent" transition>
|
||||
{track}
|
||||
</Heading>
|
||||
<Stack direction="row" align="center" gap={3} mt={1}>
|
||||
<Stack direction="row" align="center" gap={1}>
|
||||
<Icon icon={Car} size={3.5} color="var(--text-gray-400)" />
|
||||
<Text size="sm" color="text-gray-400">{car}</Text>
|
||||
</Stack>
|
||||
{strengthOfField && (
|
||||
<Stack direction="row" align="center" gap={1}>
|
||||
<Icon icon={Zap} size={3.5} color="var(--warning-amber)" />
|
||||
<Text size="sm" color="text-gray-400">SOF {strengthOfField}</Text>
|
||||
</Stack>
|
||||
)}
|
||||
</Stack>
|
||||
</Stack>
|
||||
|
||||
{/* Status Badge */}
|
||||
<Badge variant={statusConfig.variant}>
|
||||
<Icon icon={StatusIcon} size={3.5} />
|
||||
{statusConfig.label}
|
||||
</Badge>
|
||||
</Stack>
|
||||
|
||||
{/* League Link */}
|
||||
{leagueName && leagueHref && (
|
||||
<Stack mt={3} pt={3} borderTop borderColor="border-outline-steel" borderOpacity={0.3}>
|
||||
<RaceInfo
|
||||
title={track}
|
||||
subtitle={car}
|
||||
badge={
|
||||
<Badge variant={statusConfig.variant}>
|
||||
<Icon icon={statusConfig.icon} size={3.5} />
|
||||
{statusConfig.label}
|
||||
</Badge>
|
||||
}
|
||||
meta={
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
|
||||
{strengthOfField && (
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
|
||||
<Icon icon={Zap} size={3.5} intent="warning" />
|
||||
<Text size="sm" variant="low">SOF {strengthOfField}</Text>
|
||||
</div>
|
||||
)}
|
||||
{leagueName && leagueHref && (
|
||||
<Link
|
||||
href={leagueHref}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
variant="primary"
|
||||
size="sm"
|
||||
>
|
||||
<Icon icon={Trophy} size={3.5} mr={2} color="var(--primary-accent)" />
|
||||
<Text as="span" color="text-primary-accent">{leagueName}</Text>
|
||||
<Icon icon={ArrowRight} size={3} ml={2} color="var(--primary-accent)" />
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
|
||||
<Icon icon={Trophy} size={3.5} intent="primary" />
|
||||
<Text size="sm" variant="primary">{leagueName}</Text>
|
||||
<Icon icon={ArrowRight} size={3} intent="primary" />
|
||||
</div>
|
||||
</Link>
|
||||
</Stack>
|
||||
)}
|
||||
</Stack>
|
||||
|
||||
{/* Arrow */}
|
||||
<Icon icon={ChevronRight} size={5} color="var(--text-gray-500)" flexShrink={0} groupHoverTextColor="text-primary-accent" transition />
|
||||
</Stack>
|
||||
</Stack>
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</RaceCard>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
|
||||
'use client';
|
||||
|
||||
import { CountryFlagDisplay } from '@/lib/display-objects/CountryFlagDisplay';
|
||||
import { Image } from '@/ui/Image';
|
||||
import { Stack } from '@/ui/primitives/Stack';
|
||||
import { Surface } from '@/ui/primitives/Surface';
|
||||
import { ResultRow, PositionBadge, ResultPoints } from '@/ui/ResultRow';
|
||||
import { Text } from '@/ui/Text';
|
||||
import { Badge } from '@/ui/Badge';
|
||||
import React from 'react';
|
||||
|
||||
interface ResultEntry {
|
||||
position: number;
|
||||
@@ -29,78 +30,45 @@ interface RaceResultRowProps {
|
||||
export function RaceResultRow({ result, points }: RaceResultRowProps) {
|
||||
const { isCurrentUser, position, driverAvatar, driverName, country, car, laps, incidents, time, fastestLap } = result;
|
||||
|
||||
const getPositionColor = (pos: number) => {
|
||||
if (pos === 1) return { bg: 'bg-yellow-500/20', color: 'text-yellow-400' };
|
||||
if (pos === 2) return { bg: 'bg-gray-400/20', color: 'text-gray-300' };
|
||||
if (pos === 3) return { bg: 'bg-amber-600/20', color: 'text-amber-600' };
|
||||
return { bg: 'bg-iron-gray/50', color: 'text-gray-500' };
|
||||
};
|
||||
|
||||
const posConfig = getPositionColor(position);
|
||||
|
||||
return (
|
||||
<Surface
|
||||
variant={isCurrentUser ? 'muted' : 'dark'}
|
||||
rounded="xl"
|
||||
border={isCurrentUser}
|
||||
padding={3}
|
||||
className={isCurrentUser ? 'border-primary-blue/40' : ''}
|
||||
style={isCurrentUser ? { background: 'linear-gradient(to right, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.1), transparent)' } : {}}
|
||||
>
|
||||
<Stack direction="row" align="center" gap={3}>
|
||||
{/* Position */}
|
||||
<Stack
|
||||
width="10"
|
||||
height="10"
|
||||
rounded="lg"
|
||||
display="flex"
|
||||
center
|
||||
className={`${posConfig.bg} ${posConfig.color}`}
|
||||
>
|
||||
<Text weight="bold">{position}</Text>
|
||||
</Stack>
|
||||
<ResultRow isHighlighted={isCurrentUser}>
|
||||
<PositionBadge position={position} />
|
||||
|
||||
{/* Avatar */}
|
||||
<Stack position="relative" flexShrink={0}>
|
||||
<Stack width="10" height="10" rounded="full" overflow="hidden" border={isCurrentUser} borderColor="border-primary-blue/50" className={isCurrentUser ? 'border-2' : ''}>
|
||||
<Image src={driverAvatar} alt={driverName} width={40} height={40} fullWidth fullHeight objectFit="cover" />
|
||||
</Stack>
|
||||
<Stack position="absolute" bottom="-0.5" right="-0.5" width="5" height="5" rounded="full" bg="bg-deep-graphite" display="flex" center style={{ fontSize: '0.625rem' }}>
|
||||
{CountryFlagDisplay.fromCountryCode(country).toString()}
|
||||
</Stack>
|
||||
</Stack>
|
||||
{/* Avatar */}
|
||||
<div style={{ position: 'relative', flexShrink: 0 }}>
|
||||
<div style={{ width: '2.5rem', height: '2.5rem', borderRadius: '9999px', overflow: 'hidden', border: isCurrentUser ? '2px solid var(--ui-color-intent-primary)' : '1px solid var(--ui-color-border-default)' }}>
|
||||
<Image src={driverAvatar} alt={driverName} width={40} height={40} objectFit="cover" />
|
||||
</div>
|
||||
<div style={{ position: 'absolute', bottom: '-0.125rem', right: '-0.125rem', width: '1.25rem', height: '1.25rem', borderRadius: '9999px', backgroundColor: 'var(--ui-color-bg-base)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '0.625rem' }}>
|
||||
{CountryFlagDisplay.fromCountryCode(country).toString()}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Driver Info */}
|
||||
<Stack flexGrow={1} minWidth="0">
|
||||
<Stack direction="row" align="center" gap={2}>
|
||||
<Text weight="semibold" size="sm" color={isCurrentUser ? 'text-primary-blue' : 'text-white'} truncate>{driverName}</Text>
|
||||
{isCurrentUser && (
|
||||
<Stack px={2} py={0.5} rounded="full" bg="bg-primary-blue">
|
||||
<Text size="xs" weight="bold" color="text-white">YOU</Text>
|
||||
</Stack>
|
||||
)}
|
||||
</Stack>
|
||||
<Stack direction="row" align="center" gap={2} mt={1}>
|
||||
<Text size="xs" color="text-gray-500">{car}</Text>
|
||||
<Text size="xs" color="text-gray-500">•</Text>
|
||||
<Text size="xs" color="text-gray-500">Laps: {laps}</Text>
|
||||
<Text size="xs" color="text-gray-500">•</Text>
|
||||
<Text size="xs" color="text-gray-500">Incidents: {incidents}</Text>
|
||||
</Stack>
|
||||
</Stack>
|
||||
{/* Driver Info */}
|
||||
<div style={{ flex: 1, minWidth: 0 }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
|
||||
<Text weight="semibold" size="sm" variant={isCurrentUser ? 'primary' : 'high'} truncate>{driverName}</Text>
|
||||
{isCurrentUser && (
|
||||
<Badge variant="primary" size="sm">YOU</Badge>
|
||||
)}
|
||||
</div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', marginTop: '0.25rem' }}>
|
||||
<Text size="xs" variant="low">{car}</Text>
|
||||
<Text size="xs" variant="low">•</Text>
|
||||
<Text size="xs" variant="low">Laps: {laps}</Text>
|
||||
<Text size="xs" variant="low">•</Text>
|
||||
<Text size="xs" variant="low">Incidents: {incidents}</Text>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Times */}
|
||||
<Stack textAlign="right" style={{ minWidth: '100px' }}>
|
||||
<Text size="sm" font="mono" color="text-white" block>{time}</Text>
|
||||
<Text size="xs" color="text-performance-green" block mt={1}>FL: {fastestLap}</Text>
|
||||
</Stack>
|
||||
{/* Times */}
|
||||
<div style={{ textAlign: 'right', minWidth: '100px' }}>
|
||||
<Text size="sm" font="mono" variant="high" block>{time}</Text>
|
||||
<Text size="xs" variant="success" block style={{ marginTop: '0.25rem' }}>FL: {fastestLap}</Text>
|
||||
</div>
|
||||
|
||||
{/* Points */}
|
||||
<Stack p={2} rounded="lg" border={true} borderColor="border-warning-amber/20" bg="bg-warning-amber/10" textAlign="center" style={{ minWidth: '3.5rem' }}>
|
||||
<Text size="xs" color="text-gray-500" block>PTS</Text>
|
||||
<Text size="sm" weight="bold" color="text-warning-amber">{points}</Text>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Surface>
|
||||
{/* Points */}
|
||||
<ResultPoints points={points} />
|
||||
</ResultRow>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
|
||||
'use client';
|
||||
|
||||
import { Badge } from '@/ui/Badge';
|
||||
import { Icon } from '@/ui/Icon';
|
||||
import { Link } from '@/ui/Link';
|
||||
import { Stack } from '@/ui/primitives/Stack';
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/ui/Table';
|
||||
import { Text } from '@/ui/Text';
|
||||
import { PositionBadge } from '@/ui/ResultRow';
|
||||
import { AlertTriangle, ExternalLink } from 'lucide-react';
|
||||
import { ReactNode } from 'react';
|
||||
import React, { ReactNode } from 'react';
|
||||
|
||||
type PenaltyTypeDTO =
|
||||
| 'time_penalty'
|
||||
@@ -97,10 +97,10 @@ export function RaceResultsTable({
|
||||
return pointsSystem[position] || 0;
|
||||
};
|
||||
|
||||
const getPositionChangeColor = (change: number): string => {
|
||||
if (change > 0) return 'text-performance-green';
|
||||
if (change < 0) return 'text-warning-amber';
|
||||
return 'text-gray-500';
|
||||
const getPositionChangeVariant = (change: number): 'success' | 'warning' | 'low' => {
|
||||
if (change > 0) return 'success';
|
||||
if (change < 0) return 'warning';
|
||||
return 'low';
|
||||
};
|
||||
|
||||
const getPositionChangeText = (change: number): string => {
|
||||
@@ -111,14 +111,14 @@ export function RaceResultsTable({
|
||||
|
||||
if (results.length === 0) {
|
||||
return (
|
||||
<Stack textAlign="center" py={8} gap={0}>
|
||||
<Text color="text-gray-400">No results available</Text>
|
||||
</Stack>
|
||||
<div style={{ textAlign: 'center', padding: '2rem 0' }}>
|
||||
<Text variant="low">No results available</Text>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Stack overflow="auto" gap={0}>
|
||||
<div style={{ overflowX: 'auto' }}>
|
||||
<Table>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
@@ -129,7 +129,7 @@ export function RaceResultsTable({
|
||||
<TableHeader>Points</TableHeader>
|
||||
<TableHeader>+/-</TableHeader>
|
||||
<TableHeader>Penalties</TableHeader>
|
||||
{isAdmin && <TableHeader className="text-right">Actions</TableHeader>}
|
||||
{isAdmin && <TableHeader textAlign="right">Actions</TableHeader>}
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
@@ -147,117 +147,85 @@ export function RaceResultsTable({
|
||||
variant={isCurrentUser ? 'highlight' : 'default'}
|
||||
>
|
||||
<TableCell>
|
||||
<Stack
|
||||
direction="row"
|
||||
align="center"
|
||||
justify="center"
|
||||
w="8"
|
||||
h="8"
|
||||
rounded="lg"
|
||||
bg={
|
||||
result.position === 1
|
||||
? 'bg-yellow-500/20'
|
||||
: result.position === 2
|
||||
? 'bg-gray-400/20'
|
||||
: result.position === 3
|
||||
? 'bg-amber-600/20'
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
<Text
|
||||
weight="bold"
|
||||
size="sm"
|
||||
color={
|
||||
result.position === 1
|
||||
? 'text-yellow-400'
|
||||
: result.position === 2
|
||||
? 'text-gray-300'
|
||||
: result.position === 3
|
||||
? 'text-amber-500'
|
||||
: 'text-white'
|
||||
}
|
||||
>
|
||||
{result.position}
|
||||
</Text>
|
||||
</Stack>
|
||||
<PositionBadge position={result.position} />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Stack direction="row" align="center" gap={3}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
|
||||
{driver ? (
|
||||
<>
|
||||
<Stack
|
||||
w="8"
|
||||
h="8"
|
||||
rounded="full"
|
||||
align="center"
|
||||
justify="center"
|
||||
flexShrink={0}
|
||||
bg={isCurrentUser ? 'bg-primary-blue/30' : 'bg-iron-gray'}
|
||||
ring={isCurrentUser ? 'ring-2 ring-primary-blue/50' : undefined}
|
||||
>
|
||||
<React.Fragment>
|
||||
<div style={{
|
||||
width: '2rem',
|
||||
height: '2rem',
|
||||
borderRadius: '9999px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
flexShrink: 0,
|
||||
backgroundColor: isCurrentUser ? 'rgba(25, 140, 255, 0.2)' : 'var(--ui-color-bg-surface-muted)',
|
||||
border: isCurrentUser ? '2px solid var(--ui-color-intent-primary)' : '1px solid var(--ui-color-border-default)'
|
||||
}}>
|
||||
<Text
|
||||
size="sm"
|
||||
weight="bold"
|
||||
color={isCurrentUser ? 'text-primary-blue' : 'text-gray-400'}
|
||||
variant={isCurrentUser ? 'primary' : 'low'}
|
||||
>
|
||||
{driver.name.charAt(0)}
|
||||
</Text>
|
||||
</Stack>
|
||||
</div>
|
||||
<Link
|
||||
href={`/drivers/${driver.id}`}
|
||||
variant="ghost"
|
||||
className={`group ${isCurrentUser ? 'text-primary-blue font-semibold' : 'text-white'}`}
|
||||
variant={isCurrentUser ? 'primary' : 'inherit'}
|
||||
>
|
||||
<Text className="group-hover:underline">{driver.name}</Text>
|
||||
{isCurrentUser && (
|
||||
<Badge size="xs" variant="primary" bg="bg-primary-blue" color="text-white" rounded="full" style={{ marginLeft: '6px' }}>
|
||||
You
|
||||
</Badge>
|
||||
)}
|
||||
<Icon icon={ExternalLink} size={3} className="ml-1.5 opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '0.375rem' }}>
|
||||
<Text weight={isCurrentUser ? 'semibold' : 'normal'}>{driver.name}</Text>
|
||||
{isCurrentUser && (
|
||||
<Badge variant="primary" size="sm">You</Badge>
|
||||
)}
|
||||
<Icon icon={ExternalLink} size={3} intent="low" />
|
||||
</div>
|
||||
</Link>
|
||||
</>
|
||||
</React.Fragment>
|
||||
) : (
|
||||
<Text color="text-white">{getDriverName(result.driverId)}</Text>
|
||||
<Text variant="high">{getDriverName(result.driverId)}</Text>
|
||||
)}
|
||||
</Stack>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Text color={isFastestLap ? 'text-performance-green' : 'text-white'} weight={isFastestLap ? 'medium' : 'normal'}>
|
||||
<Text variant={isFastestLap ? 'success' : 'high'} weight={isFastestLap ? 'medium' : 'normal'}>
|
||||
{formatLapTime(result.fastestLap)}
|
||||
</Text>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Text color={result.incidents > 0 ? 'text-warning-amber' : 'text-white'}>
|
||||
<Text variant={result.incidents > 0 ? 'warning' : 'high'}>
|
||||
{result.incidents}×
|
||||
</Text>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Text color="text-white" weight="medium">
|
||||
<Text variant="high" weight="medium">
|
||||
{getPoints(result.position)}
|
||||
</Text>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Text weight="medium" className={getPositionChangeColor(positionChange)}>
|
||||
<Text weight="medium" variant={getPositionChangeVariant(positionChange)}>
|
||||
{getPositionChangeText(positionChange)}
|
||||
</Text>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{driverPenalties.length > 0 ? (
|
||||
<Stack gap={1}>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.25rem' }}>
|
||||
{driverPenalties.map((penalty, idx) => (
|
||||
<Stack key={idx} direction="row" align="center" gap={1.5}>
|
||||
<Icon icon={AlertTriangle} size={3} color="var(--critical-red)" />
|
||||
<Text size="xs" color="text-red-400">{getPenaltyDescription(penalty)}</Text>
|
||||
</Stack>
|
||||
<div key={idx} style={{ display: 'flex', alignItems: 'center', gap: '0.375rem' }}>
|
||||
<Icon icon={AlertTriangle} size={3} intent="critical" />
|
||||
<Text size="xs" variant="critical">{getPenaltyDescription(penalty)}</Text>
|
||||
</div>
|
||||
))}
|
||||
</Stack>
|
||||
</div>
|
||||
) : (
|
||||
<Text color="text-gray-500">—</Text>
|
||||
<Text variant="low">—</Text>
|
||||
)}
|
||||
</TableCell>
|
||||
{isAdmin && (
|
||||
<TableCell className="text-right">
|
||||
<TableCell style={{ textAlign: 'right' }}>
|
||||
{driver && penaltyButtonRenderer && penaltyButtonRenderer(driver)}
|
||||
</TableCell>
|
||||
)}
|
||||
@@ -266,6 +234,6 @@ export function RaceResultsTable({
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</Stack>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -39,18 +39,18 @@ export function RaceScheduleTable({ races, onRaceClick }: RaceScheduleTableProps
|
||||
clickable
|
||||
>
|
||||
<TableCell>
|
||||
<Text size="xs" color="text-telemetry-aqua" weight="bold">{race.time}</Text>
|
||||
<Text size="xs" variant="telemetry" weight="bold">{race.time}</Text>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Text size="sm" weight="bold" groupHoverTextColor="text-primary-accent">
|
||||
<Text size="sm" weight="bold" variant="high">
|
||||
{race.track}
|
||||
</Text>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Text size="xs" color="text-gray-400">{race.car}</Text>
|
||||
<Text size="xs" variant="low">{race.car}</Text>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Text size="xs" color="text-gray-400">{race.leagueName || 'Official'}</Text>
|
||||
<Text size="xs" variant="low">{race.leagueName || 'Official'}</Text>
|
||||
</TableCell>
|
||||
<TableCell textAlign="right">
|
||||
<SessionStatusBadge status={race.status} />
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import { Panel } from '@/ui/Panel';
|
||||
import { Icon } from '@/ui/Icon';
|
||||
import { Stack } from '@/ui/primitives/Stack';
|
||||
import { Text } from '@/ui/Text';
|
||||
import { LucideIcon } from 'lucide-react';
|
||||
import React from 'react';
|
||||
|
||||
@@ -16,24 +15,12 @@ export function RaceSidebarPanel({
|
||||
children
|
||||
}: RaceSidebarPanelProps) {
|
||||
return (
|
||||
<Stack
|
||||
bg="bg-panel-gray"
|
||||
rounded="xl"
|
||||
border
|
||||
borderColor="border-charcoal-outline"
|
||||
overflow="hidden"
|
||||
<Panel
|
||||
title={title}
|
||||
variant="dark"
|
||||
padding={4}
|
||||
>
|
||||
<Stack p={4} borderBottom="1px solid" borderColor="border-charcoal-outline" bg="bg-graphite-black/30">
|
||||
<Stack direction="row" align="center" gap={2}>
|
||||
{icon && <Icon icon={icon} size={4} color="#198CFF" />}
|
||||
<Text weight="bold" size="sm" color="text-white" uppercase>
|
||||
{title}
|
||||
</Text>
|
||||
</Stack>
|
||||
</Stack>
|
||||
<Stack p={4}>
|
||||
{children}
|
||||
</Stack>
|
||||
</Stack>
|
||||
{children}
|
||||
</Panel>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { Box } from '@/ui/primitives/Box';
|
||||
import { StatGridItem } from '@/ui/StatGridItem';
|
||||
import { StatGrid } from '@/ui/StatGrid';
|
||||
import { CalendarDays, Clock, Trophy, Zap } from 'lucide-react';
|
||||
import React from 'react';
|
||||
|
||||
interface RaceStatsProps {
|
||||
stats: {
|
||||
@@ -12,32 +12,20 @@ interface RaceStatsProps {
|
||||
}
|
||||
|
||||
export function RaceStats({ stats }: RaceStatsProps) {
|
||||
const mappedStats = [
|
||||
{ label: 'Total', value: stats.total, icon: CalendarDays, intent: 'low' as const },
|
||||
{ label: 'Scheduled', value: stats.scheduled, icon: Clock, intent: 'primary' as const },
|
||||
{ label: 'Live Now', value: stats.running, icon: Zap, intent: 'success' as const },
|
||||
{ label: 'Completed', value: stats.completed, icon: Trophy, intent: 'low' as const },
|
||||
];
|
||||
|
||||
return (
|
||||
<Box display="grid" gridCols={{ base: 2, md: 4 }} gap={4} mt={6}>
|
||||
<StatGridItem
|
||||
label="Total"
|
||||
value={stats.total}
|
||||
icon={CalendarDays}
|
||||
color="text-gray-400"
|
||||
<div style={{ marginTop: '1.5rem' }}>
|
||||
<StatGrid
|
||||
stats={mappedStats}
|
||||
columns={{ base: 2, md: 4 }}
|
||||
variant="box"
|
||||
/>
|
||||
<StatGridItem
|
||||
label="Scheduled"
|
||||
value={stats.scheduled}
|
||||
icon={Clock}
|
||||
color="text-primary-blue"
|
||||
/>
|
||||
<StatGridItem
|
||||
label="Live Now"
|
||||
value={stats.running}
|
||||
icon={Zap}
|
||||
color="text-performance-green"
|
||||
/>
|
||||
<StatGridItem
|
||||
label="Completed"
|
||||
value={stats.completed}
|
||||
icon={Trophy}
|
||||
color="text-gray-400"
|
||||
/>
|
||||
</Box>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,59 +1,38 @@
|
||||
import { Box } from '@/ui/primitives/Box';
|
||||
import { StatusBadge } from '@/ui/StatusBadge';
|
||||
import React from 'react';
|
||||
|
||||
interface RaceStatusBadgeProps {
|
||||
status: 'scheduled' | 'running' | 'completed' | 'cancelled' | string;
|
||||
}
|
||||
|
||||
export function RaceStatusBadge({ status }: RaceStatusBadgeProps) {
|
||||
const config = {
|
||||
const config: Record<string, { variant: 'info' | 'success' | 'neutral' | 'warning'; label: string }> = {
|
||||
scheduled: {
|
||||
variant: 'info' as const,
|
||||
variant: 'info',
|
||||
label: 'SCHEDULED',
|
||||
color: 'text-primary-blue',
|
||||
bg: 'bg-primary-blue/10',
|
||||
border: 'border-primary-blue/30'
|
||||
},
|
||||
running: {
|
||||
variant: 'success' as const,
|
||||
variant: 'success',
|
||||
label: 'LIVE',
|
||||
color: 'text-performance-green',
|
||||
bg: 'bg-performance-green/10',
|
||||
border: 'border-performance-green/30'
|
||||
},
|
||||
completed: {
|
||||
variant: 'neutral' as const,
|
||||
variant: 'neutral',
|
||||
label: 'COMPLETED',
|
||||
color: 'text-gray-400',
|
||||
bg: 'bg-gray-400/10',
|
||||
border: 'border-gray-400/30'
|
||||
},
|
||||
cancelled: {
|
||||
variant: 'warning' as const,
|
||||
variant: 'warning',
|
||||
label: 'CANCELLED',
|
||||
color: 'text-warning-amber',
|
||||
bg: 'bg-warning-amber/10',
|
||||
border: 'border-warning-amber/30'
|
||||
},
|
||||
};
|
||||
|
||||
const badgeConfig = config[status as keyof typeof config] || {
|
||||
variant: 'neutral' as const,
|
||||
const badgeConfig = config[status] || {
|
||||
variant: 'neutral',
|
||||
label: status.toUpperCase(),
|
||||
color: 'text-gray-400',
|
||||
bg: 'bg-gray-400/10',
|
||||
border: 'border-gray-400/30'
|
||||
};
|
||||
|
||||
return (
|
||||
<Box
|
||||
px={2.5}
|
||||
py={0.5}
|
||||
rounded="none"
|
||||
border
|
||||
className={`${badgeConfig.bg} ${badgeConfig.color} ${badgeConfig.border}`}
|
||||
style={{ fontSize: '10px', fontWeight: '800', letterSpacing: '0.05em' }}
|
||||
>
|
||||
<StatusBadge variant={badgeConfig.variant}>
|
||||
{badgeConfig.label}
|
||||
</Box>
|
||||
</StatusBadge>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { Box } from '@/ui/primitives/Box';
|
||||
import { Text } from '@/ui/Text';
|
||||
import { RaceSummary } from '@/ui/RaceSummary';
|
||||
import { DateDisplay } from '@/lib/display-objects/DateDisplay';
|
||||
import React from 'react';
|
||||
|
||||
interface RaceSummaryItemProps {
|
||||
track: string;
|
||||
@@ -9,19 +10,10 @@ interface RaceSummaryItemProps {
|
||||
|
||||
export function RaceSummaryItem({ track, meta, date }: RaceSummaryItemProps) {
|
||||
return (
|
||||
<Box display="flex" justifyContent="between" gap={3}>
|
||||
<Box flexGrow={1} minWidth="0">
|
||||
<Text size="xs" color="text-white" block truncate>{track}</Text>
|
||||
<Text size="xs" color="text-gray-400" block truncate>{meta}</Text>
|
||||
</Box>
|
||||
<Box textAlign="right">
|
||||
<Text size="xs" color="text-gray-500" className="whitespace-nowrap">
|
||||
{date.toLocaleDateString(undefined, {
|
||||
month: 'short',
|
||||
day: 'numeric'
|
||||
})}
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
<RaceSummary
|
||||
track={track}
|
||||
meta={meta}
|
||||
date={DateDisplay.formatShort(date)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { Icon } from '@/ui/Icon';
|
||||
import { Box } from '@/ui/primitives/Box';
|
||||
import { SidebarItem } from '@/ui/SidebarItem';
|
||||
import { Text } from '@/ui/Text';
|
||||
import { ChevronRight } from 'lucide-react';
|
||||
import React from 'react';
|
||||
|
||||
interface SidebarRaceItemProps {
|
||||
race: {
|
||||
@@ -10,33 +9,24 @@ interface SidebarRaceItemProps {
|
||||
scheduledAt: string;
|
||||
};
|
||||
onClick?: () => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function SidebarRaceItem({ race, onClick, className }: SidebarRaceItemProps) {
|
||||
export function SidebarRaceItem({ race, onClick }: SidebarRaceItemProps) {
|
||||
const scheduledAtDate = new Date(race.scheduledAt);
|
||||
|
||||
return (
|
||||
<Box
|
||||
<SidebarItem
|
||||
onClick={onClick}
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
gap={3}
|
||||
p={2}
|
||||
rounded="lg"
|
||||
cursor="pointer"
|
||||
className={`hover:bg-deep-graphite transition-colors ${className || ''}`}
|
||||
>
|
||||
<Box flexShrink={0} width="10" height="10" bg="bg-primary-blue/10" rounded="lg" display="flex" center>
|
||||
<Text size="sm" weight="bold" color="text-primary-blue">
|
||||
icon={
|
||||
<Text size="sm" weight="bold" variant="primary">
|
||||
{scheduledAtDate.getDate()}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box flexGrow={1} minWidth="0">
|
||||
<Text size="sm" weight="medium" color="text-white" block truncate>{race.track}</Text>
|
||||
<Text size="xs" color="text-gray-500" block>{scheduledAtDate.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</Text>
|
||||
</Box>
|
||||
<Icon icon={ChevronRight} size={4} color="text-gray-500" />
|
||||
</Box>
|
||||
}
|
||||
>
|
||||
<Text size="sm" weight="medium" variant="high" block truncate>{race.track}</Text>
|
||||
<Text size="xs" variant="low" block>
|
||||
{scheduledAtDate.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
|
||||
</Text>
|
||||
</SidebarItem>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user