website refactor

apps/website/components/leagues/StandingsTable.tsx

@@ -55,12 +55,12 @@ interface StandingsTableProps {
   standings: Array<{
     driverId: string;
     position: number;
-    totalPoints: number;
-    racesFinished: number;
-    racesStarted: number;
-    avgFinish: number | null;
-    penaltyPoints: number;
-    bonusPoints: number;
+    positionLabel: string;
+    totalPointsLabel: string;
+    racesLabel: string;
+    avgFinishLabel: string;
+    penaltyPointsLabel: string;
+    bonusPointsLabel: string;
     teamName?: string;
   }>;
   drivers: Array<{
@@ -508,7 +508,7 @@ export function StandingsTable({
                       'text-white'
                     }
                   >
-                    {row.position}
+                    {row.positionLabel}
                   </Stack>
                 </TableCell>
 
@@ -625,7 +625,7 @@ export function StandingsTable({
               {/* Total Points with Hover Action */}
               <TableCell textAlign="right" position="relative">
                 <Stack display="flex" alignItems="center" justifyContent="end" gap={2}>
-                  <Text color="text-white" weight="bold" size="lg">{row.totalPoints}</Text>
+                  <Text color="text-white" weight="bold" size="lg">{row.totalPointsLabel}</Text>
                   {isAdmin && canModify && (
                       <Stack
                         as="button"
@@ -650,28 +650,27 @@ export function StandingsTable({
 
               {/* Races (Finished/Started) */}
               <TableCell textAlign="center">
-                <Text color="text-white">{row.racesFinished}</Text>
-                <Text color="text-gray-500">/{row.racesStarted}</Text>
+                <Text color="text-white">{row.racesLabel}</Text>
               </TableCell>
 
               {/* Avg Finish */}
               <TableCell textAlign="right">
                 <Text color="text-gray-300">
-                  {row.avgFinish !== null ? row.avgFinish.toFixed(1) : '—'}
+                  {row.avgFinishLabel}
                 </Text>
               </TableCell>
 
               {/* Penalty */}
               <TableCell textAlign="right">
-                <Text color={row.penaltyPoints > 0 ? 'text-red-400' : 'text-gray-500'} weight={row.penaltyPoints > 0 ? 'medium' : 'normal'}>
-                  {row.penaltyPoints > 0 ? `-${row.penaltyPoints}` : '—'}
+                <Text color="text-gray-500">
+                  {row.penaltyPointsLabel}
                 </Text>
               </TableCell>
 
               {/* Bonus */}
               <TableCell textAlign="right">
-                <Text color={row.bonusPoints !== 0 ? 'text-green-400' : 'text-gray-500'} weight={row.bonusPoints !== 0 ? 'medium' : 'normal'}>
-                  {row.bonusPoints !== 0 ? `+${row.bonusPoints}` : '—'}
+                <Text color="text-gray-500">
+                  {row.bonusPointsLabel}
                 </Text>
               </TableCell>
             </TableRow>