77 lines
2.1 KiB
TypeScript
77 lines
2.1 KiB
TypeScript
import { ChevronRight } from 'lucide-react';
|
|
import { ReactNode } from 'react';
|
|
import { Box } from './Box';
|
|
import { Card } from './Card';
|
|
import { Heading } from './Heading';
|
|
import { Icon } from './Icon';
|
|
import { Text } from './Text';
|
|
|
|
export interface RaceCardProps {
|
|
children: ReactNode;
|
|
onClick: () => void;
|
|
isLive?: boolean;
|
|
}
|
|
|
|
export const RaceCard = ({ children, onClick, isLive }: RaceCardProps) => {
|
|
return (
|
|
<Card
|
|
variant="dark"
|
|
onClick={onClick}
|
|
style={{ position: 'relative', cursor: 'pointer', overflow: 'hidden' }}
|
|
>
|
|
{isLive && (
|
|
<Box
|
|
position="absolute"
|
|
top={0}
|
|
left={0}
|
|
right={0}
|
|
height="2px"
|
|
bg="var(--ui-color-intent-success)"
|
|
style={{ opacity: 0.8 }}
|
|
/>
|
|
)}
|
|
<Box display="flex" alignItems="center" gap={4}>
|
|
{children}
|
|
<Icon icon={ChevronRight} size={5} intent="low" />
|
|
</Box>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export interface RaceTimeColumnProps {
|
|
date?: string;
|
|
time: string;
|
|
relativeTime?: string;
|
|
isLive?: boolean;
|
|
}
|
|
|
|
export const RaceTimeColumn = ({ date, time, relativeTime, isLive }: RaceTimeColumnProps) => (
|
|
<Box width="5rem" textAlign="center" flexShrink={0}>
|
|
{date && <Text size="xs" variant="low" uppercase block>{date}</Text>}
|
|
<Text size="lg" weight="bold" variant="high" block>{time}</Text>
|
|
<Text size="xs" variant={isLive ? 'success' : 'low'} block uppercase>
|
|
{isLive ? 'LIVE' : relativeTime}
|
|
</Text>
|
|
</Box>
|
|
);
|
|
|
|
export interface RaceInfoProps {
|
|
title: string;
|
|
subtitle: string;
|
|
badge?: ReactNode;
|
|
meta?: ReactNode;
|
|
}
|
|
|
|
export const RaceInfo = ({ title, subtitle, badge, meta }: RaceInfoProps) => (
|
|
<Box flex={1} minWidth="0">
|
|
<Box display="flex" alignItems="start" justifyContent="between" gap={4}>
|
|
<Box minWidth="0">
|
|
<Heading level={3} truncate>{title}</Heading>
|
|
<Text size="sm" variant="low" block marginTop={1}>{subtitle}</Text>
|
|
{meta && <Box marginTop={2}>{meta}</Box>}
|
|
</Box>
|
|
{badge && <Box flexShrink={0}>{badge}</Box>}
|
|
</Box>
|
|
</Box>
|
|
);
|