website refactor

apps/website/components/dashboard/NextRaceCard.tsx

@@ -0,0 +1,74 @@
+'use client';
+
+import React from 'react';
+import { Calendar, Clock, ChevronRight } from 'lucide-react';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { Heading } from '@/ui/Heading';
+import { Button } from '@/ui/Button';
+import { Link } from '@/ui/Link';
+import { Surface } from '@/ui/Surface';
+
+interface NextRaceCardProps {
+  nextRace: {
+    id: string;
+    track: string;
+    car: string;
+    formattedDate: string;
+    formattedTime: string;
+    timeUntil: string;
+    isMyLeague: boolean;
+  };
+}
+
+export function NextRaceCard({ nextRace }: 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 style={{ position: 'absolute', top: 0, right: 0, width: '10rem', height: '10rem', background: 'linear-gradient(to bottom left, rgba(59, 130, 246, 0.2), transparent)', borderBottomLeftRadius: '9999px' }} />
+      <Box style={{ position: 'relative' }}>
+        <Stack direction="row" align="center" gap={2} mb={4}>
+          <Surface variant="muted" rounded="full" padding={1} style={{ backgroundColor: 'rgba(59, 130, 246, 0.2)', border: '1px solid rgba(59, 130, 246, 0.3)', paddingLeft: '0.75rem', paddingRight: '0.75rem' }}>
+            <Text size="xs" weight="semibold" color="text-primary-blue" style={{ textTransform: 'uppercase', letterSpacing: '0.05em' }}>Next Race</Text>
+          </Surface>
+          {nextRace.isMyLeague && (
+            <Surface variant="muted" rounded="full" padding={1} style={{ backgroundColor: 'rgba(16, 185, 129, 0.2)', color: '#10b981', paddingLeft: '0.5rem', paddingRight: '0.5rem' }}>
+              <Text size="xs" weight="medium">Your League</Text>
+            </Surface>
+          )}
+        </Stack>
+       
+        <Stack direction="row" align="end" justify="between" wrap gap={4}>
+          <Box>
+            <Heading level={2} style={{ fontSize: '1.5rem', marginBottom: '0.5rem' }}>{nextRace.track}</Heading>
+            <Text color="text-gray-400" block mb={3}>{nextRace.car}</Text>
+            <Stack direction="row" align="center" gap={4}>
+              <Stack direction="row" align="center" gap={1.5}>
+                <Calendar style={{ width: '1rem', height: '1rem', color: '#6b7280' }} />
+                <Text size="sm" color="text-gray-400">{nextRace.formattedDate}</Text>
+              </Stack>
+              <Stack direction="row" align="center" gap={1.5}>
+                <Clock style={{ width: '1rem', height: '1rem', color: '#6b7280' }} />
+                <Text size="sm" color="text-gray-400">{nextRace.formattedTime}</Text>
+              </Stack>
+            </Stack>
+          </Box>
+         
+          <Stack align="end" gap={3}>
+            <Box style={{ 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">{nextRace.timeUntil}</Text>
+            </Box>
+            <Box>
+              <Link href={`/races/${nextRace.id}`} variant="ghost">
+                <Button variant="primary" icon={<ChevronRight style={{ width: '1rem', height: '1rem' }} />}>
+                  View Details
+                </Button>
+              </Link>
+            </Box>
+          </Stack>
+        </Stack>
+      </Box>
+    </Surface>
+  );
+}