website refactor

apps/website/components/drivers/DriverProfileHeader.tsx

@@ -0,0 +1,106 @@
+'use client';
+
+import React from 'react';
+import { Globe, Trophy, UserPlus, Check } from 'lucide-react';
+import { Heading } from '@/ui/Heading';
+import { Text } from '@/ui/Text';
+import { Button } from '@/ui/Button';
+import { RatingBadge } from '@/ui/RatingBadge';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Image } from '@/ui/Image';
+import { SafetyRatingBadge } from './SafetyRatingBadge';
+
+interface DriverProfileHeaderProps {
+  name: string;
+  avatarUrl?: string | null;
+  nationality: string;
+  rating: number;
+  safetyRating?: number;
+  globalRank?: number;
+  bio?: string | null;
+  friendRequestSent: boolean;
+  onAddFriend: () => void;
+}
+
+export function DriverProfileHeader({
+  name,
+  avatarUrl,
+  nationality,
+  rating,
+  safetyRating = 92,
+  globalRank,
+  bio,
+  friendRequestSent,
+  onAddFriend,
+}: DriverProfileHeaderProps) {
+  const defaultAvatar = 'https://cdn.gridpilot.com/avatars/default.png';
+
+  return (
+    <Box position="relative" overflow="hidden" rounded="2xl" border borderColor="border-charcoal-outline" bg="bg-deep-charcoal" p={{ base: 6, lg: 8 }}>
+      {/* Background Accents */}
+      <Box position="absolute" right="-24" top="-24" w="96" h="96" rounded="full" bg="bg-primary-blue/5" blur="3xl" />
+
+      <Box position="relative" display="flex" flexDirection={{ base: 'col', lg: 'row' }} gap={8}>
+        {/* Avatar */}
+        <Box position="relative" h={{ base: '32', lg: '40' }} w={{ base: '32', lg: '40' }} flexShrink={0} overflow="hidden" rounded="2xl" border={true} borderWidth="2px" borderColor="border-charcoal-outline" bg="bg-deep-graphite" shadow="2xl">
+          <Image
+            src={avatarUrl || defaultAvatar}
+            alt={name}
+            fill
+            objectFit="cover"
+          />
+        </Box>
+
+        {/* Info */}
+        <Box display="flex" flexGrow={1} flexDirection="col" gap={4}>
+          <Box display="flex" flexDirection={{ base: 'col', lg: 'row' }} alignItems={{ lg: 'center' }} justifyContent="between" gap={2}>
+            <Box>
+              <Stack direction="row" align="center" gap={3} mb={1}>
+                <Heading level={1}>{name}</Heading>
+                {globalRank && (
+                  <Box display="flex" alignItems="center" gap={1} rounded="md" bg="bg-warning-amber/10" px={2} py={0.5} border borderColor="border-warning-amber/20">
+                    <Trophy size={12} color="#FFBE4D" />
+                    <Text size="xs" weight="bold" font="mono" color="text-warning-amber">
+                      #{globalRank}
+                    </Text>
+                  </Box>
+                )}
+              </Stack>
+              <Stack direction="row" align="center" gap={4}>
+                <Stack direction="row" align="center" gap={1.5}>
+                  <Globe size={14} color="#6B7280" />
+                  <Text size="sm" color="text-gray-400">{nationality}</Text>
+                </Stack>
+                <Box w="1" h="1" rounded="full" bg="bg-gray-700" />
+                <Stack direction="row" align="center" gap={2}>
+                  <RatingBadge rating={rating} size="sm" />
+                  <SafetyRatingBadge rating={safetyRating} size="sm" />
+                </Stack>
+              </Stack>
+            </Box>
+
+            <Box mt={{ base: 4, lg: 0 }}>
+              <Button
+                variant={friendRequestSent ? 'secondary' : 'primary'}
+                onClick={onAddFriend}
+                disabled={friendRequestSent}
+                icon={friendRequestSent ? <Check size={18} /> : <UserPlus size={18} />}
+              >
+                {friendRequestSent ? 'Request Sent' : 'Add Friend'}
+              </Button>
+            </Box>
+          </Box>
+
+          {bio && (
+            <Box maxWidth="3xl">
+              <Text size="sm" color="text-gray-400" leading="relaxed">
+                {bio}
+              </Text>
+            </Box>
+          )}
+        </Box>
+      </Box>
+    </Box>
+  );
+}