simplify date display and fix invalids

src/features/tournaments/components/tournament-card.tsx

@@ -10,12 +10,17 @@ interface TournamentCardProps {
 
 export const TournamentCard = ({ tournament }: TournamentCardProps) => {
   const navigate = useNavigate({ from: '/tournaments/$tournamentId' })
-  const date = useMemo(() => new Date(tournament.start_time), [tournament?.start_time])
-  const year = useMemo(() => date.getFullYear(), [date])
-  const month = useMemo(() => date.getMonth(), [date])
-  const monthName = useMemo(() => new Date(date.getFullYear(), month, 1).toLocaleString('default', { month: 'long' }), [date])
-  const day = useMemo(() => date.getDate(), [date])
-  
+  const displayDate = useMemo(() => {
+    if (!tournament.start_time) return null
+    const date = new Date(tournament.start_time)
+    if (isNaN(date.getTime())) return null
+    return date.toLocaleDateString('en-US', { 
+      year: 'numeric', 
+      month: 'long', 
+      day: 'numeric' 
+    })
+  }, [tournament.start_time])
+
   return (
     <Card shadow="sm" padding="lg" radius="md" withBorder style={{ cursor: 'pointer' }} onClick={() => navigate({ to: `/tournaments/${tournament.id}` })}>
       <Stack>
@@ -29,7 +34,7 @@ export const TournamentCard = ({ tournament }: TournamentCardProps) => {
             />
             <Stack ta='center' mx='auto' gap='0'>
               <Text size='lg' fw={800}>{tournament.name} <CaretRightIcon size={12} weight='bold' /></Text>
-              <Text c='dimmed' size='xs' fw={600}>{monthName} {day}, {year}</Text>
+              {displayDate && <Text c='dimmed' size='xs' fw={600}>{displayDate}</Text>}
               <Stack gap={4} mt={4}>
                 { /* TODO: Add medalists when data is available */}
                 <Badge variant='dot' color='gold'>Longer Team Name Goes Here</Badge>