website refactor

apps/website/components/teams/TeamRosterItem.tsx

@@ -8,9 +8,9 @@ interface TeamRosterItemProps {
   driver: DriverViewModel;
   href: string;
   roleLabel: string;
-  joinedAt: string | Date;
-  rating: number | null;
-  overallRank: number | null;
+  joinedAtLabel: string;
+  ratingLabel: string | null;
+  overallRankLabel: string | null;
   actions?: ReactNode;
 }
 
@@ -18,9 +18,9 @@ export function TeamRosterItem({
   driver,
   href,
   roleLabel,
-  joinedAt,
-  rating,
-  overallRank,
+  joinedAtLabel,
+  ratingLabel,
+  overallRankLabel,
   actions,
 }: TeamRosterItemProps) {
   return (
@@ -38,23 +38,23 @@ export function TeamRosterItem({
           contextLabel={roleLabel}
           meta={
             <Text size="xs" color="text-gray-400">
-              {driver.country} • Joined {new Date(joinedAt).toLocaleDateString()}
+              {driver.country} • Joined {joinedAtLabel}
             </Text>
           }
           size="md"
         />
 
-        {rating !== null && (
+        {ratingLabel !== null && (
           <Stack direction="row" align="center" gap={6}>
             <Stack display="flex" flexDirection="col" alignItems="center">
               <Text size="lg" weight="bold" color="text-primary-blue" block>
-                {rating}
+                {ratingLabel}
               </Text>
               <Text size="xs" color="text-gray-400">Rating</Text>
             </Stack>
-            {overallRank !== null && (
+            {overallRankLabel !== null && (
               <Stack display="flex" flexDirection="col" alignItems="center">
-                <Text size="sm" color="text-gray-300" block>#{overallRank}</Text>
+                <Text size="sm" color="text-gray-300" block>{overallRankLabel}</Text>
                 <Text size="xs" color="text-gray-500">Rank</Text>
               </Stack>
             )}