website refactor

apps/website/components/drivers/DriverHeaderPanel.tsx

@@ -9,7 +9,8 @@ interface DriverHeaderPanelProps {
   avatarUrl?: string;
   nationality: string;
   rating: number;
-  globalRank?: number | null;
+  ratingLabel: string;
+  globalRankLabel?: string | null;
   bio?: string | null;
   actions?: React.ReactNode;
 }
@@ -19,7 +20,8 @@ export function DriverHeaderPanel({
   avatarUrl,
   nationality,
   rating,
-  globalRank,
+  ratingLabel,
+  globalRankLabel,
   bio,
   actions
 }: DriverHeaderPanelProps) {
@@ -54,8 +56,8 @@ export function DriverHeaderPanel({
             rounded="2xl" 
             overflow="hidden" 
             border 
-            borderColor="border-charcoal-outline"
-            bg="bg-graphite-black"
+            borderColor="border-charcoal-outline" 
+            bg="bg-graphite-black" 
             flexShrink={0}
           >
             <Image 
@@ -73,16 +75,16 @@ export function DriverHeaderPanel({
                 <Text as="h1" size="3xl" weight="bold" color="text-white">
                   {name}
                 </Text>
-                <RatingBadge rating={rating} size="lg" />
+                <RatingBadge rating={rating} ratingLabel={ratingLabel} size="lg" />
               </Stack>
               
               <Stack direction="row" align="center" gap={4} wrap>
                 <Text size="sm" color="text-gray-400">
                   {nationality}
                 </Text>
-                {globalRank !== undefined && globalRank !== null && (
+                {globalRankLabel && (
                   <Text size="sm" color="text-gray-400">
-                    Global Rank: <Text color="text-warning-amber" weight="semibold">#{globalRank}</Text>
+                    Global Rank: <Text color="text-warning-amber" weight="semibold">{globalRankLabel}</Text>
                   </Text>
                 )}
               </Stack>