website refactor

apps/website/components/races/NextRaceCard.tsx

@@ -0,0 +1,123 @@
+
+
+import { Calendar, ChevronRight, Clock } from 'lucide-react';
+import { Badge } from '@/ui/Badge';
+import { Box } from '@/ui/Box';
+import { Button } from '@/ui/Button';
+import { Heading } from '@/ui/Heading';
+import { Icon } from '@/ui/Icon';
+import { Link } from '@/ui/Link';
+import { Stack } from '@/ui/Stack';
+import { Surface } from '@/ui/Surface';
+import { Text } from '@/ui/Text';
+
+interface NextRaceCardProps {
+  track: string;
+  car: string;
+  formattedDate: string;
+  formattedTime: string;
+  timeUntil: string;
+  isMyLeague: boolean;
+  href: string;
+}
+
+export function NextRaceCard({
+  track,
+  car,
+  formattedDate,
+  formattedTime,
+  timeUntil,
+  isMyLeague,
+  href,
+}: NextRaceCardProps) {
+  return (
+    <Surface
+      variant="muted"
+      rounded="xl"
+      border
+      padding={6}
+      style={{
+        position: 'relative',
+        overflow: 'hidden',
+        background: 'linear-gradient(to bottom right, #262626, rgba(38, 38, 38, 0.8))',
+        borderColor: 'rgba(59, 130, 246, 0.3)',
+      }}
+    >
+      <Box
+        position="absolute"
+        top="0"
+        right="0"
+        w="40"
+        h="40"
+        style={{
+          background: 'linear-gradient(to bottom left, rgba(59, 130, 246, 0.2), transparent)',
+          borderBottomLeftRadius: '9999px',
+        }}
+      />
+      <Box position="relative">
+        <Stack direction="row" align="center" gap={2} mb={4}>
+          <Badge variant="primary" style={{ textTransform: 'uppercase', letterSpacing: '0.05em' }}>
+            Next Race
+          </Badge>
+          {isMyLeague && (
+            <Badge variant="success">
+              Your League
+            </Badge>
+          )}
+        </Stack>
+
+        <Stack direction="row" align="end" justify="between" wrap gap={4}>
+          <Box>
+            <Heading level={2} style={{ fontSize: '1.5rem', marginBottom: '0.5rem' }}>
+              {track}
+            </Heading>
+            <Text color="text-gray-400" block mb={3}>
+              {car}
+            </Text>
+            <Stack direction="row" align="center" gap={4}>
+              <Stack direction="row" align="center" gap={1.5}>
+                <Icon icon={Calendar} size={4} color="var(--text-gray-500)" />
+                <Text size="sm" color="text-gray-400">
+                  {formattedDate}
+                </Text>
+              </Stack>
+              <Stack direction="row" align="center" gap={1.5}>
+                <Icon icon={Clock} size={4} color="var(--text-gray-500)" />
+                <Text size="sm" color="text-gray-400">
+                  {formattedTime}
+                </Text>
+              </Stack>
+            </Stack>
+          </Box>
+
+          <Stack align="end" gap={3}>
+            <Box textAlign="right">
+              <Text
+                size="xs"
+                color="text-gray-500"
+                style={{ textTransform: 'uppercase', letterSpacing: '0.05em' }}
+                block
+                mb={1}
+              >
+                Starts in
+              </Text>
+              <Text size="3xl" weight="bold" color="text-primary-blue" font="mono">
+                {timeUntil}
+              </Text>
+            </Box>
+            <Box>
+              <Link href={href}>
+                <Button
+                  variant="primary"
+                  icon={<Icon icon={ChevronRight} size={4} />}
+                >
+                  View Details
+                </Button>
+              </Link>
+            </Box>
+          </Stack>
+        </Stack>
+      </Box>
+    </Surface>
+  );
+}