website refactor

apps/website/ui/RaceResultCard.tsx

@@ -0,0 +1,106 @@
+
+
+import { ChevronRight } from 'lucide-react';
+import { Box } from './Box';
+import { Card } from './Card';
+import { Icon } from './Icon';
+import { Link } from './Link';
+import { Stack } from './Stack';
+import { Text } from './Text';
+
+interface RaceResultCardProps {
+  raceId: string;
+  track: string;
+  car: string;
+  scheduledAt: string | Date;
+  position: number;
+  startPosition: number;
+  incidents: number;
+  leagueName?: string;
+  showLeague?: boolean;
+  onClick?: () => void;
+}
+
+export function RaceResultCard({
+  raceId,
+  track,
+  car,
+  scheduledAt,
+  position,
+  startPosition,
+  incidents,
+  leagueName,
+  showLeague = true,
+  onClick,
+}: RaceResultCardProps) {
+  const getPositionColor = (pos: number) => {
+    if (pos === 1) return 'text-yellow-400 bg-yellow-400/20';
+    if (pos === 2) return 'text-gray-300 bg-gray-400/20';
+    if (pos === 3) return 'text-amber-600 bg-amber-600/20';
+    return 'text-gray-400 bg-charcoal-outline';
+  };
+
+  return (
+    <Link
+      href={`/races/${raceId}`}
+      variant="ghost"
+      block
+      onClick={onClick}
+    >
+      <Card p={4} className="hover:border-primary-blue/50 transition-colors group">
+        <Box display="flex" alignItems="center" justifyContent="between" mb={2}>
+          <Stack direction="row" align="center" gap={3}>
+            <Box 
+              width="8" 
+              height="8" 
+              rounded="md" 
+              display="flex" 
+              center 
+              weight="bold" 
+              size="sm"
+              className={getPositionColor(position)}
+            >
+              P{position}
+            </Box>
+            <Box>
+              <Text color="text-white" weight="medium" block className="group-hover:text-primary-blue transition-colors">
+                {track}
+              </Text>
+              <Text size="sm" color="text-gray-400" block>{car}</Text>
+            </Box>
+          </Stack>
+          <Stack direction="row" align="center" gap={3}>
+            <Box textAlign="right">
+              <Text size="sm" color="text-gray-400" block>
+                {new Date(scheduledAt).toLocaleDateString('en-US', {
+                  month: 'short',
+                  day: 'numeric',
+                  year: 'numeric',
+                })}
+              </Text>
+              {showLeague && leagueName && (
+                <Text size="xs" color="text-gray-500" block>{leagueName}</Text>
+              )}
+            </Box>
+            <Icon icon={ChevronRight} size={5} color="text-gray-500" className="group-hover:text-primary-blue transition-colors" />
+          </Stack>
+        </Box>
+        <Stack direction="row" align="center" gap={4} color="text-gray-500">
+          <Text size="xs">Started P{startPosition}</Text>
+          <Text size="xs">•</Text>
+          <Text size="xs" color={incidents === 0 ? 'text-performance-green' : incidents > 2 ? 'text-error-red' : undefined}>
+            {incidents}x incidents
+          </Text>
+          {position < startPosition && (
+            <>
+              <Text size="xs">•</Text>
+              <Text size="xs" color="text-performance-green">
+                +{startPosition - position} positions
+              </Text>
+            </>
+          )}
+        </Stack>
+      </Card>
+    </Link>
+  );
+}