website refactor

2026-01-17 15:46:55 +01:00
parent 4d5ce9bfd6
commit 72a626ce71
346 changed files with 19308 additions and 8605 deletions
--- a/apps/website/components/drivers/DriverRacingProfile.tsx
+++ b/apps/website/components/drivers/DriverRacingProfile.tsx
@@ -0,0 +1,76 @@
+'use client';
+
+import React from 'react';
+import { Heading } from '@/ui/Heading';
+import { Text } from '@/ui/Text';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { MapPin, Car, Clock, Users2, MailCheck } from 'lucide-react';
+
+interface DriverRacingProfileProps {
+  racingStyle?: string | null;
+  favoriteTrack?: string | null;
+  favoriteCar?: string | null;
+  availableHours?: string | null;
+  lookingForTeam?: boolean;
+  openToRequests?: boolean;
+}
+
+export function DriverRacingProfile({
+  racingStyle,
+  favoriteTrack,
+  favoriteCar,
+  availableHours,
+  lookingForTeam,
+  openToRequests,
+}: DriverRacingProfileProps) {
+  const details = [
+    { label: 'Racing Style', value: racingStyle || 'Not specified', icon: Users2 },
+    { label: 'Favorite Track', value: favoriteTrack || 'Not specified', icon: MapPin },
+    { label: 'Favorite Car', value: favoriteCar || 'Not specified', icon: Car },
+    { label: 'Availability', value: availableHours || 'Not specified', icon: Clock },
+  ];
+
+  return (
+    <Box display="flex" flexDirection="col" gap={6} rounded="2xl" border borderColor="border-charcoal-outline" bg="bg-deep-charcoal/50" p={6}>
+      <Box display="flex" alignItems="center" justifyContent="between">
+        <Heading level={3}>Racing Profile</Heading>
+        <Stack direction="row" gap={2}>
+          {lookingForTeam && (
+            <Box display="flex" alignItems="center" gap={1.5} rounded="full" bg="bg-primary-blue/10" border borderColor="border-primary-blue/20" px={3} py={1}>
+              <Users2 size={12} color="#198CFF" />
+              <Text size="xs" weight="bold" color="text-primary-blue" uppercase letterSpacing="tight">Looking for Team</Text>
+            </Box>
+          )}
+          {openToRequests && (
+            <Box display="flex" alignItems="center" gap={1.5} rounded="full" bg="bg-performance-green/10" border borderColor="border-performance-green/20" px={3} py={1}>
+              <MailCheck size={12} color="#22C55E" />
+              <Text size="xs" weight="bold" color="text-performance-green" uppercase letterSpacing="tight">Open to Requests</Text>
+            </Box>
+          )}
+        </Stack>
+      </Box>
+
+      <Box display="grid" gridCols={{ base: 1, sm: 2 }} gap={4}>
+        {details.map((detail, index) => {
+          const Icon = detail.icon;
+          return (
+            <Box key={index} display="flex" alignItems="center" gap={4} rounded="xl" border borderColor="border-charcoal-outline/50" bg="bg-deep-graphite/50" p={4}>
+              <Box display="flex" h="10" w="10" alignItems="center" justifyContent="center" rounded="lg" bg="bg-charcoal-outline/50" color="text-gray-400">
+                <Icon size={20} />
+              </Box>
+              <Box display="flex" flexDirection="col">
+                <Text size="xs" weight="bold" color="text-gray-500" uppercase letterSpacing="wider">
+                  {detail.label}
+                </Text>
+                <Text size="sm" weight="semibold" color="text-white">
+                  {detail.value}
+                </Text>
+              </Box>
+            </Box>
+          );
+        })}
+      </Box>
+    </Box>
+  );
+}