rules, bracket page

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

@@ -5,7 +5,7 @@ import { Box, Button, Card, Divider, Group, Stack, Text } from "@mantine/core";
 import Countdown from "@/components/countdown";
 import ListLink from "@/components/list-link";
 import ListButton from "@/components/list-button";
-import { UsersIcon, ListIcon } from "@phosphor-icons/react";
+import { TreeStructureIcon, UsersIcon } from "@phosphor-icons/react";
 import EnrollTeam from "./enroll-team";
 import EnrollFreeAgent from "./enroll-free-agent";
 import TeamListButton from "./team-list-button";
@@ -16,6 +16,7 @@ import UpdateTeam from "./update-team";
 import UnenrollTeam from "./unenroll-team";
 import { useQueryClient } from "@tanstack/react-query";
 import { tournamentKeys } from "../../queries";
+import RulesListButton from "./rules-list-button";
 
 const UpcomingTournament: React.FC<{ tournament: Tournament }> = ({
   tournament,
@@ -42,8 +43,6 @@ const UpcomingTournament: React.FC<{ tournament: Tournament }> = ({
     queryClient.invalidateQueries({ queryKey: tournamentKeys.current })
   }
 
-  console.log(userTeam)
-
   return (
     <Stack gap="lg">
       <Header tournament={tournament} />
@@ -102,7 +101,12 @@ const UpcomingTournament: React.FC<{ tournament: Tournament }> = ({
             Icon={UsersIcon}
           />
         )}
-        <ListButton label="View Rules" Icon={ListIcon} onClick={() => {}} />
+        <ListLink
+            label={`View Bracket`}
+            to={`/tournaments/${tournament.id}/bracket`}
+            Icon={TreeStructureIcon}
+          />
+        <RulesListButton tournamentId={tournament.id} />
         <TeamListButton teams={tournament.teams || []} />
       </Box>
     </Stack>

src/features/tournaments/components/upcoming-tournament/rules-list-button.tsx

@@ -0,0 +1,45 @@
+import ListButton from "@/components/list-button"
+import Sheet from "@/components/sheet/sheet"
+import { useSheet } from "@/hooks/use-sheet"
+import { ListIcon } from "@phosphor-icons/react"
+import { useTournament } from "../../queries"
+import { useEditor } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+import { RichTextEditor } from '@mantine/tiptap';
+import { Button, Stack } from "@mantine/core"
+
+interface RulesListButtonProps {
+  tournamentId: string;
+}
+
+const RulesListButton: React.FC<RulesListButtonProps> = ({ tournamentId }) => {
+  const { data: tournament } = useTournament(tournamentId);
+  const { open, isOpen, toggle } = useSheet();
+
+  const editor = useEditor({
+    extensions: [StarterKit],
+    content: tournament?.rules || '',
+    editable: false,
+  });
+
+  return (
+    <>
+      <ListButton
+        label={`View Rules`}
+        Icon={ListIcon}
+        onClick={open}
+      />
+
+      <Sheet title="Tournament Rules" opened={isOpen} onChange={toggle}>
+        <Stack gap="xs">
+          <RichTextEditor editor={editor}>
+            <RichTextEditor.Content />
+          </RichTextEditor>
+          <Button variant="subtle" c="red" onClick={toggle}>Close</Button>
+        </Stack>
+      </Sheet>
+    </>
+  )
+}
+
+export default RulesListButton;