several

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

@@ -0,0 +1,59 @@
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { tournamentQueries } from "../queries";
+import { List } from "@mantine/core";
+import ListButton from "@/components/list-button";
+import Sheet from "@/components/sheet/sheet";
+import TournamentForm from "./tournament-form";
+import { HardDrivesIcon, PencilLineIcon, UsersThreeIcon } from "@phosphor-icons/react";
+import { useSheet } from "@/hooks/use-sheet";
+import EditEnrolledTeams from "./edit-enrolled-teams";
+
+interface ManageTournamentProps {
+  tournamentId: string;
+}
+
+const ManageTournament = ({ tournamentId }: ManageTournamentProps) => {
+  const { data: tournament } = useSuspenseQuery(
+    tournamentQueries.details(tournamentId)
+  );
+
+  if (!tournament) throw new Error("Tournament not found.");
+  const { isOpen: editTournamentOpened, open: openEditTournament, close: closeEditTournament } = useSheet();
+  const { isOpen: editRulesOpened, open: openEditRules, close: closeEditRules } = useSheet();
+  const { isOpen: editTeamsOpened, open: openEditTeams, close: closeEditTeams } = useSheet();
+
+  return (
+    <>
+      <List>
+        <ListButton label="Edit Tournament" Icon={HardDrivesIcon} onClick={openEditTournament} />
+        <ListButton label="Edit Rules" Icon={PencilLineIcon} onClick={openEditRules} />
+        <ListButton label="Edit Enrolled Teams" Icon={UsersThreeIcon} onClick={openEditTeams} />
+      </List>
+
+      <Sheet title="Edit Tournament" opened={editTournamentOpened} onChange={closeEditTournament}>
+        <TournamentForm 
+          tournamentId={tournament.id} 
+          initialValues={{
+            name: tournament.name,
+            location: tournament.location,
+            desc: tournament.desc,
+            start_time: tournament.start_time,
+            enroll_time: tournament.enroll_time,
+            end_time: tournament.end_time,
+          }} 
+          close={closeEditTournament} 
+        />
+      </Sheet>
+
+      <Sheet title="Edit Rules" opened={editRulesOpened} onChange={closeEditRules}>
+        <p>Test</p>
+      </Sheet>
+
+      <Sheet title="Edit Enrolled Teams" opened={editTeamsOpened} onChange={closeEditTeams}>
+        <EditEnrolledTeams tournamentId={tournamentId} />
+      </Sheet>
+    </>
+  )
+};
+
+export default ManageTournament;