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;

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

@@ -0,0 +1,79 @@
+import { useMemo } from "react";
+import { Tournament } from "../../types";
+import { useAuth } from "@/contexts/auth-context";
+import { Box, Divider, Stack, Text, Card, Center } from "@mantine/core";
+import { Carousel } from "@mantine/carousel";
+import ListLink from "@/components/list-link";
+import { TreeStructureIcon, UsersIcon, ClockIcon } from "@phosphor-icons/react";
+import TeamListButton from "../upcoming-tournament/team-list-button";
+import RulesListButton from "../upcoming-tournament/rules-list-button";
+import MatchCard from "@/features/matches/components/match-card";
+import Header from "./header";
+
+const StartedTournament: React.FC<{ tournament: Tournament }> = ({
+  tournament,
+}) => {
+  const { roles } = useAuth();
+
+  const isAdmin = useMemo(() => roles.includes("Admin"), [roles]);
+
+  const startedMatches = useMemo(() =>
+    tournament.matches?.filter(match => match.status === "started") || [],
+    [tournament.matches]
+  );
+
+  return (
+    <Stack gap="lg">
+      <Header tournament={tournament} />
+
+      {startedMatches.length > 0 ? (
+        <Box>
+          <Carousel
+            slideSize="95%"
+            slideGap="xs"
+            withControls={false}
+          >
+            {startedMatches.map((match, index) => (
+              <Carousel.Slide key={match.id}>
+                <Box pl={index === 0 ? "xl" : undefined } pr={index === startedMatches.length - 1 ? "xl" : undefined}>
+                  <MatchCard match={match} />
+                </Box>
+              </Carousel.Slide>
+            ))}
+          </Carousel>
+        </Box>
+      ) : (
+        <Card withBorder radius="lg" p="xl" mx="md">
+          <Center>
+            <Stack align="center" gap="md">
+              <ClockIcon size={48} color="var(--mantine-color-dimmed)" />
+              <Text size="lg" fw={500} c="dimmed">
+                No active matches
+              </Text>
+            </Stack>
+          </Center>
+        </Card>
+      )}
+
+      <Box>
+        <Divider />
+        {isAdmin && (
+          <ListLink
+            label={`Manage ${tournament.name}`}
+            to={`/admin/tournaments/${tournament.id}`}
+            Icon={UsersIcon}
+          />
+        )}
+        <ListLink
+          label={`View Bracket`}
+          to={`/tournaments/${tournament.id}/bracket`}
+          Icon={TreeStructureIcon}
+        />
+        <RulesListButton tournamentId={tournament.id} />
+        <TeamListButton teams={tournament.teams || []} />
+      </Box>
+    </Stack>
+  );
+};
+
+export default StartedTournament;