website refactor

apps/website/components/races/RaceResultCard.tsx

@@ -12,10 +12,12 @@ interface RaceResultCardProps {
   raceId: string;
   track: string;
   car: string;
-  scheduledAt: string | Date;
+  formattedDate: string;
   position: number;
-  startPosition: number;
-  incidents: number;
+  positionLabel: string;
+  startPositionLabel: string;
+  incidentsLabel: string;
+  positionsGainedLabel?: string;
   leagueName?: string;
   showLeague?: boolean;
   onClick?: () => void;
@@ -25,10 +27,12 @@ export function RaceResultCard({
   raceId,
   track,
   car,
-  scheduledAt,
+  formattedDate,
   position,
-  startPosition,
-  incidents,
+  positionLabel,
+  startPositionLabel,
+  incidentsLabel,
+  positionsGainedLabel,
   leagueName,
   showLeague = true,
   onClick,
@@ -66,7 +70,7 @@ export function RaceResultCard({
               border
               borderColor="border-outline-steel"
             >
-              P{position}
+              {positionLabel}
             </Stack>
             <Stack>
               <Text color="text-white" weight="medium" block groupHoverTextColor="text-primary-accent" transition>
@@ -78,11 +82,7 @@ export function RaceResultCard({
           <Stack direction="row" align="center" gap={3}>
             <Stack textAlign="right">
               <Text size="sm" color="text-gray-400" block>
-                {new Date(scheduledAt).toLocaleDateString('en-US', {
-                  month: 'short',
-                  day: 'numeric',
-                  year: 'numeric',
-                })}
+                {formattedDate}
               </Text>
               {showLeague && leagueName && (
                 <Text size="xs" color="text-gray-500" block>{leagueName}</Text>
@@ -92,16 +92,16 @@ export function RaceResultCard({
           </Stack>
         </Stack>
         <Stack direction="row" align="center" gap={4}>
-          <Text size="xs" color="text-gray-500">Started P{startPosition}</Text>
+          <Text size="xs" color="text-gray-500">Started {startPositionLabel}</Text>
           <Text size="xs" color="text-gray-500">•</Text>
-          <Text size="xs" color={incidents === 0 ? 'text-success-green' : incidents > 2 ? 'text-error-red' : 'text-gray-500'}>
-            {incidents}x incidents
+          <Text size="xs" color="text-gray-500">
+            {incidentsLabel}
           </Text>
-          {position < startPosition && (
+          {positionsGainedLabel && (
             <>
               <Text size="xs" color="text-gray-500">•</Text>
               <Text size="xs" color="text-success-green">
-                +{startPosition - position} positions
+                {positionsGainedLabel}
               </Text>
             </>
           )}