stats reorg, upcoming refinement

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

@@ -0,0 +1,72 @@
+import { Group, Stack, ThemeIcon, Text } from "@mantine/core";
+import { Tournament } from "../../types";
+import Avatar from "@/components/avatar";
+import { CalendarIcon, MapPinIcon, TrophyIcon, UsersIcon } from "@phosphor-icons/react";
+import { useMemo } from "react";
+
+const Header = ({ tournament }: { tournament: Tournament}) => {
+  const tournamentStart = useMemo(() => new Date(tournament.start_time), [tournament.start_time]);
+  const teamCount = useMemo(() => tournament.teams?.length || 0, [tournament.teams]);
+
+    return (
+        <Group justify="space-around" align="flex-start" w='100%'>
+        <Group align="center" gap="lg">
+          <Avatar
+            name={tournament.name}
+            src={
+              tournament.logo
+                ? `/api/files/tournaments/${tournament.id}/${tournament.logo}`
+                : undefined
+            }
+            radius="md"
+            size={200}
+            px='md'
+            withBorder={false}
+          >
+            <TrophyIcon size={32} />
+          </Avatar>
+          <Stack gap="xs">
+            {tournament.location && (
+              <Group gap="xs">
+                <ThemeIcon size="sm" variant="light" radius="sm">
+                  <MapPinIcon size={14} />
+                </ThemeIcon>
+                <Text size="sm" c="dimmed">
+                  {tournament.location}
+                </Text>
+              </Group>
+            )}
+
+            <Group gap="xs">
+              <ThemeIcon size="sm" variant="light" radius="sm">
+                <CalendarIcon size={14} />
+              </ThemeIcon>
+              <Text size="sm" c="dimmed">
+                {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">
+                {teamCount} teams enrolled
+              </Text>
+            </Group>
+          </Stack>
+        </Group>
+      </Group>
+    )
+}
+
+export default Header;