website refactor

apps/website/components/drivers/ProfileHero.tsx

@@ -17,12 +17,12 @@ interface ProfileHeroProps {
     avatarUrl?: string;
     country: string;
     iracingId: number;
-    joinedAt: string | Date;
+    joinedAtLabel: string;
   };
   stats: {
-    rating: number;
+    ratingLabel: string;
   } | null;
-  globalRank: number;
+  globalRankLabel: string;
   timezone: string;
   socialHandles: {
     platform: string;
@@ -47,7 +47,7 @@ function getSocialIcon(platform: string) {
 export function ProfileHero({
   driver,
   stats,
-  globalRank,
+  globalRankLabel,
   timezone,
   socialHandles,
   onAddFriend,
@@ -87,14 +87,14 @@ export function ProfileHero({
                 <Surface variant="muted" rounded="lg" padding={1} style={{ backgroundColor: 'rgba(59, 130, 246, 0.1)', border: '1px solid rgba(59, 130, 246, 0.3)', paddingLeft: '0.75rem', paddingRight: '0.75rem' }}>
                   <Stack direction="row" align="center" gap={2}>
                     <Star style={{ width: '1rem', height: '1rem', color: '#3b82f6' }} />
-                    <Text font="mono" weight="bold" color="text-primary-blue">{stats.rating}</Text>
+                    <Text font="mono" weight="bold" color="text-primary-blue">{stats.ratingLabel}</Text>
                     <Text size="xs" color="text-gray-400">Rating</Text>
                   </Stack>
                 </Surface>
                 <Surface variant="muted" rounded="lg" padding={1} style={{ backgroundColor: 'rgba(250, 204, 21, 0.1)', border: '1px solid rgba(250, 204, 21, 0.3)', paddingLeft: '0.75rem', paddingRight: '0.75rem' }}>
                   <Stack direction="row" align="center" gap={2}>
                     <Trophy style={{ width: '1rem', height: '1rem', color: '#facc15' }} />
-                    <Text font="mono" weight="bold" style={{ color: '#facc15' }}>#{globalRank}</Text>
+                    <Text font="mono" weight="bold" style={{ color: '#facc15' }}>{globalRankLabel}</Text>
                     <Text size="xs" color="text-gray-400">Global</Text>
                   </Stack>
                 </Surface>
@@ -111,11 +111,7 @@ export function ProfileHero({
             <Stack direction="row" align="center" gap={1.5}>
               <Calendar style={{ width: '1rem', height: '1rem' }} />
               <Text size="sm">
-                Joined{' '}
-                {new Date(driver.joinedAt).toLocaleDateString('en-US', {
-                  month: 'short',
-                  year: 'numeric',
-                })}
+                Joined {driver.joinedAtLabel}
               </Text>
             </Stack>
             <Stack direction="row" align="center" gap={1.5}>