significant refactor

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

@@ -1,50 +1,73 @@
-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"
+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
+  tournament: Tournament;
 }
 
 export const TournamentCard = ({ tournament }: TournamentCardProps) => {
-  const navigate = useNavigate({ from: '/tournaments/$tournamentId' })
+  const navigate = useNavigate();
   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])
+    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}` })}>
+    <Card
+      shadow="sm"
+      padding="lg"
+      radius="md"
+      withBorder
+      style={{ cursor: "pointer" }}
+      onClick={() => navigate({ to: `/tournaments/${tournament.id}` })}
+    >
       <Stack>
-        <Flex align='center' gap='md'>
+        <Flex align="center" gap="md">
           <Image
-            src={tournament.logo ? `/api/files/tournaments/${tournament.id}/${tournament.logo}` : undefined}
             maw={100}
             mah={100}
-            fit='contain'
+            fit="contain"
+            src={
+              tournament.logo
+                ? `/api/files/tournaments/${tournament.id}/${tournament.logo}`
+                : undefined
+            }
             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 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>
-  )
-}
+  );
+};