73 lines
1.7 KiB
TypeScript
73 lines
1.7 KiB
TypeScript
import { ChevronRight } from 'lucide-react';
|
|
import { ReactNode } from 'react';
|
|
import { Box } from './Box';
|
|
import { Surface } from './Surface';
|
|
import { Icon } from './Icon';
|
|
|
|
export interface RaceRowProps {
|
|
children: ReactNode;
|
|
onClick: (e: React.MouseEvent) => void;
|
|
status?: 'live' | 'upcoming' | 'past';
|
|
emphasis?: 'low' | 'medium' | 'high';
|
|
as?: any;
|
|
href?: string;
|
|
}
|
|
|
|
/**
|
|
* RaceRow is a semantic UI component for displaying a race in a list.
|
|
* It encapsulates the visual style of a race entry per the GridPilot theme.
|
|
*/
|
|
export const RaceRow = ({
|
|
children,
|
|
onClick,
|
|
status = 'upcoming',
|
|
emphasis = 'medium',
|
|
as,
|
|
href
|
|
}: RaceRowProps) => {
|
|
const isLive = status === 'live';
|
|
|
|
return (
|
|
<Surface
|
|
as={as}
|
|
href={href}
|
|
variant="precision"
|
|
onClick={onClick}
|
|
padding="none"
|
|
cursor="pointer"
|
|
position="relative"
|
|
overflow="hidden"
|
|
transition="all 0.2s ease-in-out"
|
|
hoverBg="rgba(255, 255, 255, 0.02)"
|
|
display="block"
|
|
style={{ textDecoration: 'none', color: 'inherit' }}
|
|
>
|
|
{isLive && (
|
|
<Box
|
|
position="absolute"
|
|
top={0}
|
|
left={0}
|
|
bottom={0}
|
|
width="2px"
|
|
bg="var(--ui-color-intent-success)"
|
|
/>
|
|
)}
|
|
<Box
|
|
display="flex"
|
|
alignItems="center"
|
|
gap={4}
|
|
paddingX={4}
|
|
paddingY={3}
|
|
opacity={emphasis === 'low' ? 0.6 : 1}
|
|
>
|
|
<Box display="flex" alignItems="center" gap={4} flex={1}>
|
|
{children}
|
|
</Box>
|
|
<Box flexShrink={0} display="flex" alignItems="center">
|
|
<Icon icon={ChevronRight} size={4} intent="low" />
|
|
</Box>
|
|
</Box>
|
|
</Surface>
|
|
);
|
|
};
|