kyle/flxn-app
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

simplify date display and fix invalids

Browse Source
This commit is contained in:
yohlo
2025-08-20 22:50:46 -05:00
parent b3edbbcc00
commit 311b8581ad
1 changed files with 12 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/features/tournaments/components/tournament-card.tsx
View File

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