reactions, match sse, etc

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

@@ -0,0 +1,67 @@
+import { Group, Stack, ThemeIcon, Text, Flex } from "@mantine/core";
+import { Tournament } from "../../types";
+import Avatar from "@/components/avatar";
+import {
+  CalendarIcon,
+  MapPinIcon,
+  TrophyIcon,
+} from "@phosphor-icons/react";
+import { useMemo } from "react";
+
+const Header = ({ tournament }: { tournament: Tournament }) => {
+  const tournamentStart = useMemo(
+    () => new Date(tournament.start_time),
+    [tournament.start_time]
+  );
+
+  return (
+    <Stack align="center" gap={0}>
+      <Avatar
+        name={tournament.name}
+        src={
+          tournament.logo
+            ? `/api/files/tournaments/${tournament.id}/${tournament.logo}`
+            : undefined
+        }
+        radius="md"
+        size={200}
+        px="xs"
+        withBorder={false}
+      >
+        <TrophyIcon size={24} />
+      </Avatar>
+      <Flex gap="xs" direction="row" wrap="wrap" justify="space-around">
+        {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>
+      </Flex>
+    </Stack>
+  );
+};
+
+export default Header;