various improvements, edit tournament, etc

src/app/routes/_authed/tournaments/$tournamentId.tsx

@@ -2,11 +2,14 @@ import { createFileRoute } from '@tanstack/react-router'
 import { tournamentQueries } from '@/features/tournaments/queries';
 import Page from '@/components/page'
 import { useQuery } from '@tanstack/react-query';
-import { Box, Button } from '@mantine/core';
+import { Box, Group, Title } from '@mantine/core';
 import { useSheet } from '@/hooks/use-sheet';
 import Sheet from '@/components/sheet/sheet';
 import { Tournament } from '@/features/tournaments/types';
 import TeamList from '@/features/teams/components/team-list';
+import Button from '@/components/button';
+import Avatar from '@/components/avatar';
+import Profile from '@/features/tournaments/components/profile';
 
 export const Route = createFileRoute('/_authed/tournaments/$tournamentId')({
   beforeLoad: async ({ context, params }) => {
@@ -28,28 +31,8 @@ export const Route = createFileRoute('/_authed/tournaments/$tournamentId')({
 
 function RouteComponent() {
   const { data: tournament } = useQuery(tournamentQueries.details(Route.useParams().tournamentId));
-
-  const sheet = useSheet()
-
   return <Page noPadding>
-    <Box mt='xl' p='md'>
-
-      <h3 style={{ marginTop: 0 }}>
-        {tournament?.name}
-      </h3>
-
-      <Button onClick={() => sheet.open()}>
-        View Teams
-      </Button>
-
-    </Box>
-
-    <Sheet
-      {...sheet.props}
-      title='Teams'
-    >
-      <TeamDrawer tournament={tournament!} />
-    </Sheet>
+    <Profile tournament={tournament!} />
   </Page>
 }
 

src/app/routes/_authed/tournaments/index.tsx

@@ -1,5 +1,5 @@
 import Page from '@/components/page'
-import { Button, Stack } from '@mantine/core'
+import { Stack } from '@mantine/core'
 import { createFileRoute } from '@tanstack/react-router'
 import { TournamentCard } from '@/features/tournaments/components/tournament-card'
 import { tournamentQueries } from '@/features/tournaments/queries'
@@ -9,6 +9,7 @@ import { useSheet } from '@/hooks/use-sheet'
 import Sheet from '@/components/sheet/sheet'
 import CreateTournament from '@/features/admin/components/create-tournament'
 import { PlusIcon } from '@phosphor-icons/react'
+import Button from '@/components/button'
 
 export const Route = createFileRoute('/_authed/tournaments/')({
   beforeLoad: async ({ context }) => {