reactions, match sse, etc

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;