51 lines
1.9 KiB
TypeScript
51 lines
1.9 KiB
TypeScript
import { Badge, Card, Text, Image, Stack, Flex } from "@mantine/core"
|
|
import { Tournament } from "@/features/tournaments/types"
|
|
import { useMemo } from "react"
|
|
import { CaretRightIcon, TrophyIcon } from "@phosphor-icons/react"
|
|
import { useNavigate } from "@tanstack/react-router"
|
|
|
|
interface TournamentCardProps {
|
|
tournament: Tournament
|
|
}
|
|
|
|
export const TournamentCard = ({ tournament }: TournamentCardProps) => {
|
|
const navigate = useNavigate({ from: '/tournaments/$tournamentId' })
|
|
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>
|
|
<Flex align='center' gap='md'>
|
|
<Image
|
|
src={tournament.logo ? `/api/files/tournaments/${tournament.id}/${tournament.logo}` : undefined}
|
|
maw={100}
|
|
mah={100}
|
|
fit='contain'
|
|
alt={tournament.name}
|
|
fallbackSrc={"TODO"}
|
|
/>
|
|
<Stack ta='center' mx='auto' gap='0'>
|
|
<Text size='lg' fw={800}>{tournament.name} <CaretRightIcon size={12} weight='bold' /></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>
|
|
<Badge variant='dot' color='silver'>Some Team</Badge>
|
|
<Badge variant='dot' color='orange'>Medium Team Name</Badge>
|
|
</Stack>
|
|
</Stack>
|
|
</Flex>
|
|
</Stack>
|
|
</Card>
|
|
)
|
|
}
|