website refactor

apps/website/components/races/RaceSummaryItem.tsx

@@ -1,5 +1,6 @@
-import { Box } from '@/ui/primitives/Box';
-import { Text } from '@/ui/Text';
+import { RaceSummary } from '@/ui/RaceSummary';
+import { DateDisplay } from '@/lib/display-objects/DateDisplay';
+import React from 'react';
 
 interface RaceSummaryItemProps {
   track: string;
@@ -9,19 +10,10 @@ interface RaceSummaryItemProps {
 
 export function RaceSummaryItem({ track, meta, date }: RaceSummaryItemProps) {
   return (
-    <Box display="flex" justifyContent="between" gap={3}>
-      <Box flexGrow={1} minWidth="0">
-        <Text size="xs" color="text-white" block truncate>{track}</Text>
-        <Text size="xs" color="text-gray-400" block truncate>{meta}</Text>
-      </Box>
-      <Box textAlign="right">
-        <Text size="xs" color="text-gray-500" className="whitespace-nowrap">
-          {date.toLocaleDateString(undefined, {
-            month: 'short',
-            day: 'numeric'
-          })}
-        </Text>
-      </Box>
-    </Box>
+    <RaceSummary
+      track={track}
+      meta={meta}
+      date={DateDisplay.formatShort(date)}
+    />
   );
 }