wip upcoming tournament page

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

@@ -10,6 +10,7 @@ import {
   Stack,
   Title,
   Text,
+  ThemeIcon,
 } from "@mantine/core";
 import Avatar from "@/components/avatar";
 import Countdown from "@/components/countdown";
@@ -46,10 +47,12 @@ const UpcomingTournament: React.FC<{ tournament: Tournament }> = ({
   const tournamentStart = new Date(tournament.start_time);
   const isEnrollmentOpen = enrollmentDeadline > new Date();
 
+  const enrolledTeamsCount = tournament.teams?.length || 0;
+
   return (
     <Stack gap="lg">
-      <Group justify="space-between" align="flex-start">
-        <Group align="flex-start" gap="lg">
+      <Group justify="space-around" align="flex-start" w='100%'>
+        <Group align="center" gap="lg">
           <Avatar
             name={tournament.name}
             src={
@@ -58,42 +61,55 @@ const UpcomingTournament: React.FC<{ tournament: Tournament }> = ({
                 : undefined
             }
             radius="md"
-            size={80}
+            size={120}
+            px='md'
             withBorder={false}
           >
             <TrophyIcon size={32} />
           </Avatar>
           <Stack gap="xs">
-            <Group gap="sm">
-              <Title order={2}>{tournament.name}</Title>
-            </Group>
             {tournament.location && (
               <Group gap="xs">
-                <MapPinIcon size={16} />
+                <ThemeIcon size="sm" variant="light" radius="sm">
+                  <MapPinIcon size={14} />
+                </ThemeIcon>
                 <Text size="sm" c="dimmed">
                   {tournament.location}
                 </Text>
               </Group>
             )}
+
             <Group gap="xs">
-              <CalendarIcon size={16} />
+              <ThemeIcon size="sm" variant="light" radius="sm">
+                <CalendarIcon size={14} />
+              </ThemeIcon>
               <Text size="sm" c="dimmed">
-                {tournamentStart.toLocaleDateString()} at{" "}
+                {tournamentStart.toLocaleDateString(undefined, {
+                  weekday: "short",
+                  month: "short",
+                  day: "numeric",
+                })}{" "}
+                at{" "}
                 {tournamentStart.toLocaleTimeString([], {
                   hour: "2-digit",
                   minute: "2-digit",
                 })}
               </Text>
             </Group>
+
+            <Group gap="xs">
+              <ThemeIcon size="sm" variant="light" radius="sm">
+                <UsersIcon size={14} />
+              </ThemeIcon>
+              <Text size="sm" c="dimmed">
+                {enrolledTeamsCount} teams enrolled
+              </Text>
+            </Group>
           </Stack>
         </Group>
       </Group>
 
-      {tournament.desc && (
-        <Text size="sm">
-          {tournament.desc}
-        </Text>
-      )}
+      {tournament.desc && <Text size="sm">{tournament.desc}</Text>}
 
       <Card withBorder radius="md" p="lg">
         <Stack gap="md">
@@ -134,7 +150,7 @@ const UpcomingTournament: React.FC<{ tournament: Tournament }> = ({
         )}
         <ListButton label="View Rules" Icon={ListIcon} onClick={() => {}} />
         <ListButton
-          label={`View Teams (${tournament.teams?.length || 0})`}
+          label={`View Teams (${enrolledTeamsCount})`}
           Icon={UsersIcon}
           onClick={() => {}}
         />