various improvements, edit tournament, etc

src/features/tournaments/components/profile/header.tsx

@@ -0,0 +1,23 @@
+import { Flex, Title } from "@mantine/core";
+import Avatar from "@/components/avatar";
+import { Tournament } from "../../types";
+
+interface HeaderProps {
+  tournament: Tournament;
+}
+
+const Header = ({ tournament }: HeaderProps) => {
+
+  return (
+    <>
+      <Flex px='xl' w='100%' align='self-end' gap='md'>
+        <Avatar name={tournament.name} radius={0} withBorder={false} size={125} src={`/api/files/tournaments/${tournament.id}/${tournament.logo}`} />
+        <Flex align='center' justify='center' gap={4} pb={20} w='100%'>
+          <Title ta='center' order={2}>{tournament.name}</Title>
+        </Flex>
+      </Flex>
+    </>
+  )
+};
+
+export default Header;

src/features/tournaments/components/profile/index.tsx

@@ -0,0 +1,38 @@
+import { Box, Divider, Text } from "@mantine/core";
+import Header from "./header";
+import TeamList from "@/features/teams/components/team-list";
+import SwipeableTabs from "@/components/swipeable-tabs";
+import { Tournament } from "../../types";
+import { PreviewBracket } from "@/features/bracket/components/preview";
+
+interface ProfileProps {
+  tournament: Tournament;
+}
+
+const Profile = ({ tournament }: ProfileProps) => {
+  const tabs = [
+    {
+      label: "Overview",
+      content: <Text p="md">Stats/Badges will go here, bracket link</Text>
+    },
+    {
+      label: "Matches",
+      content: <Text p="md">Matches feed will go here</Text>
+    },
+    {
+      label: "Teams", 
+      content: <>
+        <TeamList teams={tournament.teams || []} />
+      </>
+    }
+  ];
+
+  return <>
+    <Header tournament={tournament} />
+    <Box m='sm' mt='lg'>
+      <SwipeableTabs tabs={tabs} />
+    </Box>
+  </>;
+};
+
+export default Profile;

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

@@ -0,0 +1,40 @@
+import { List, ListItem, Skeleton, Text } from "@mantine/core";
+import { useNavigate } from "@tanstack/react-router";
+import Avatar from "@/components/avatar";
+import { Tournament } from "../types";
+
+interface TournamentListProps {
+  tournaments: Tournament[];
+  loading?: boolean;
+}
+
+const TournamentList = ({ tournaments, loading = false }: TournamentListProps) => {
+  const navigate = useNavigate();
+  
+  if (loading) return <List>
+    {Array.from({ length: 10 }).map((_, i) => (
+      <ListItem py='xs'
+        icon={<Skeleton height={40} width={40} />}
+      >
+        <Skeleton height={20} width={200} />
+      </ListItem>
+    ))}
+  </List>
+
+  return <List>
+    {tournaments?.map((tournament) => (
+      <ListItem key={tournament.id}
+        py='xs'
+        icon={<Avatar radius='xs' size={40} name={`${tournament.name}`} src={`/api/files/tournaments/${tournament.id}/${tournament.logo}`} />}
+        style={{ cursor: 'pointer' }}
+        onClick={() => {
+          navigate({ to: `/tournaments/${tournament.id}` });
+        }}
+      >
+        <Text fw={500}>{`${tournament.name}`}</Text>
+      </ListItem>
+    ))}
+  </List>
+}
+
+export default TournamentList;