92 lines
2.5 KiB
TypeScript
92 lines
2.5 KiB
TypeScript
'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>
|
|
);
|
|
}
|