website refactor

apps/website/ui/RaceCard.tsx

@@ -0,0 +1,76 @@
+import React, { ReactNode } from 'react';
+import { Card } from './Card';
+import { Box } from './primitives/Box';
+import { Text } from './Text';
+import { Heading } from './Heading';
+import { Icon } from './Icon';
+import { LucideIcon, ChevronRight } from 'lucide-react';
+
+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>
+);