website refactor

apps/website/components/profile/RacingProfile.tsx

@@ -0,0 +1,79 @@
+'use client';
+
+import React from 'react';
+import { Flag, Users, UserPlus } from 'lucide-react';
+import { Card } from '@/ui/Card';
+import { Heading } from '@/ui/Heading';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { Surface } from '@/ui/Surface';
+import { Icon } from '@/ui/Icon';
+
+interface RacingProfileProps {
+  racingStyle: string;
+  favoriteTrack: string;
+  favoriteCar: string;
+  availableHours: string;
+  lookingForTeam: boolean;
+  openToRequests: boolean;
+}
+
+export function RacingProfile({
+  racingStyle,
+  favoriteTrack,
+  favoriteCar,
+  availableHours,
+  lookingForTeam,
+  openToRequests,
+}: RacingProfileProps) {
+  return (
+    <Card>
+      <Box mb={4}>
+        <Heading level={2} icon={<Icon icon={Flag} size={5} color="#00f2ff" />}>
+          Racing Profile
+        </Heading>
+      </Box>
+      <Stack gap={4}>
+        <Box>
+          <Text size="xs" color="text-gray-500" style={{ textTransform: 'uppercase', letterSpacing: '0.05em' }} block>Racing Style</Text>
+          <Text color="text-white" weight="medium">{racingStyle}</Text>
+        </Box>
+        <Box>
+          <Text size="xs" color="text-gray-500" style={{ textTransform: 'uppercase', letterSpacing: '0.05em' }} block>Favorite Track</Text>
+          <Text color="text-white" weight="medium">{favoriteTrack}</Text>
+        </Box>
+        <Box>
+          <Text size="xs" color="text-gray-500" style={{ textTransform: 'uppercase', letterSpacing: '0.05em' }} block>Favorite Car</Text>
+          <Text color="text-white" weight="medium">{favoriteCar}</Text>
+        </Box>
+        <Box>
+          <Text size="xs" color="text-gray-500" style={{ textTransform: 'uppercase', letterSpacing: '0.05em' }} block>Available</Text>
+          <Text color="text-white" weight="medium">{availableHours}</Text>
+        </Box>
+
+        {/* Status badges */}
+        <Box mt={4} pt={4} style={{ borderTop: '1px solid rgba(38, 38, 38, 0.5)' }}>
+          <Stack gap={2}>
+            {lookingForTeam && (
+              <Surface variant="muted" rounded="lg" padding={2} style={{ backgroundColor: 'rgba(16, 185, 129, 0.1)', border: '1px solid rgba(16, 185, 129, 0.3)' }}>
+                <Stack direction="row" align="center" gap={2}>
+                  <Icon icon={Users} size={4} color="#10b981" />
+                  <Text size="sm" color="text-performance-green" weight="medium">Looking for Team</Text>
+                </Stack>
+              </Surface>
+            )}
+            {openToRequests && (
+              <Surface variant="muted" rounded="lg" padding={2} style={{ backgroundColor: 'rgba(59, 130, 246, 0.1)', border: '1px solid rgba(59, 130, 246, 0.3)' }}>
+                <Stack direction="row" align="center" gap={2}>
+                  <Icon icon={UserPlus} size={4} color="#3b82f6" />
+                  <Text size="sm" color="text-primary-blue" weight="medium">Open to Friend Requests</Text>
+                </Stack>
+              </Surface>
+            )}
+          </Stack>
+        </Box>
+      </Stack>
+    </Card>
+  );
+}