Files
flxn-app/src/features/tournaments/components/manage-tournament.tsx
2025-08-28 18:09:09 -05:00

60 lines
2.2 KiB
TypeScript

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;