website refactor

apps/website/components/drivers/DriverHeaderPanel.tsx

@@ -0,0 +1,109 @@
+import React from 'react';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Stack } from '@/ui/Stack';
+import { Image } from '@/ui/Image';
+import { RatingBadge } from '@/components/drivers/RatingBadge';
+
+interface DriverHeaderPanelProps {
+  name: string;
+  avatarUrl?: string;
+  nationality: string;
+  rating: number;
+  globalRank?: number | null;
+  bio?: string | null;
+  actions?: React.ReactNode;
+}
+
+export function DriverHeaderPanel({
+  name,
+  avatarUrl,
+  nationality,
+  rating,
+  globalRank,
+  bio,
+  actions
+}: DriverHeaderPanelProps) {
+  const defaultAvatar = 'https://cdn.gridpilot.com/avatars/default.png';
+
+  return (
+    <Box 
+      bg="bg-panel-gray" 
+      rounded="xl" 
+      border 
+      borderColor="border-charcoal-outline" 
+      overflow="hidden"
+      position="relative"
+    >
+      {/* Background Accent */}
+      <Box 
+        position="absolute" 
+        top={0} 
+        left={0} 
+        right={0} 
+        height="24" 
+        bg="bg-gradient-to-r from-primary-blue/20 to-transparent"
+        opacity={0.5}
+      />
+
+      <Box p={6} position="relative">
+        <Stack direction={{ base: 'col', md: 'row' }} gap={6} align="start" className="md:items-center">
+          {/* Avatar */}
+          <Box 
+            width="32" 
+            height="32" 
+            rounded="2xl" 
+            overflow="hidden" 
+            border 
+            borderColor="border-charcoal-outline"
+            bg="bg-graphite-black"
+            flexShrink={0}
+          >
+            <Image 
+              src={avatarUrl || defaultAvatar} 
+              alt={name} 
+              fill 
+              objectFit="cover" 
+            />
+          </Box>
+
+          {/* Info */}
+          <Box flexGrow={1}>
+            <Stack gap={2}>
+              <Stack direction="row" align="center" gap={3} wrap>
+                <Text as="h1" size="3xl" weight="bold" color="text-white">
+                  {name}
+                </Text>
+                <RatingBadge rating={rating} size="lg" />
+              </Stack>
+              
+              <Stack direction="row" align="center" gap={4} wrap>
+                <Text size="sm" color="text-gray-400">
+                  {nationality}
+                </Text>
+                {globalRank !== undefined && globalRank !== null && (
+                  <Text size="sm" color="text-gray-400">
+                    Global Rank: <Text color="text-warning-amber" weight="semibold">#{globalRank}</Text>
+                  </Text>
+                )}
+              </Stack>
+
+              {bio && (
+                <Text size="sm" color="text-gray-400" className="max-w-2xl mt-2" lineClamp={2}>
+                  {bio}
+                </Text>
+              )}
+            </Stack>
+          </Box>
+
+          {/* Actions */}
+          {actions && (
+            <Box flexShrink={0}>
+              {actions}
+            </Box>
+          )}
+        </Stack>
+      </Box>
+    </Box>
+  );
+}