website refactor

apps/website/components/drivers/DriverProfileHeader.tsx

@@ -14,8 +14,10 @@ interface DriverProfileHeaderProps {
   avatarUrl?: string | null;
   nationality: string;
   rating: number;
+  ratingLabel: string;
   safetyRating?: number;
-  globalRank?: number;
+  safetyRatingLabel: string;
+  globalRankLabel?: string;
   bio?: string | null;
   friendRequestSent: boolean;
   onAddFriend: () => void;
@@ -26,8 +28,10 @@ export function DriverProfileHeader({
   avatarUrl,
   nationality,
   rating,
+  ratingLabel,
   safetyRating = 92,
-  globalRank,
+  safetyRatingLabel,
+  globalRankLabel,
   bio,
   friendRequestSent,
   onAddFriend,
@@ -56,11 +60,11 @@ export function DriverProfileHeader({
             <Stack>
               <Stack direction="row" align="center" gap={3} mb={1}>
                 <Heading level={1}>{name}</Heading>
-                {globalRank && (
+                {globalRankLabel && (
                   <Stack 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}
+                      {globalRankLabel}
                     </Text>
                   </Stack>
                 )}
@@ -72,8 +76,8 @@ export function DriverProfileHeader({
                 </Stack>
                 <Stack 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" />
+                  <RatingBadge rating={rating} ratingLabel={ratingLabel} size="sm" />
+                  <SafetyRatingBadge rating={safetyRating} ratingLabel={safetyRatingLabel} size="sm" />
                 </Stack>
               </Stack>
             </Stack>