init

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

@@ -0,0 +1,44 @@
+import { Badge, Card, Text, Image, Stack, Flex } from "@mantine/core"
+import { Tournament } from "@/features/tournaments/types"
+import { useMemo } from "react"
+import { CaretRightIcon } 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 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])
+  
+  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_url}
+            maw={100}
+            mah={100}
+            fit='contain'
+            alt={tournament.name}
+            />
+            <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>
+              <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>
+  )
+}