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>