skeletons, tournament stats, polish, bug fixes

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

@@ -0,0 +1,14 @@
+import { Flex, Skeleton } from "@mantine/core";
+
+const HeaderSkeleton = () => {
+  return (
+    <Flex h="20dvh" px='xl' w='100%' align='flex-end' gap='md'>
+      <Skeleton opacity={0} height={150} width={150} />
+      <Flex align='center' justify='center' gap={4} w='100%'>
+        <Skeleton height={36} width={200} />
+      </Flex>
+    </Flex>
+  );
+};
+
+export default HeaderSkeleton;

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

@@ -10,7 +10,7 @@ const Header = ({ tournament }: HeaderProps) => {
 
   return (
     <>
-      <Flex px='xl' w='100%' align='self-end' gap='md'>
+      <Flex h="20dvh" 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>

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

@@ -1,9 +1,11 @@
-import { Box, Text } from "@mantine/core";
+import { useMemo } from "react";
+import { Box } from "@mantine/core";
 import Header from "./header";
 import TeamList from "@/features/teams/components/team-list";
 import SwipeableTabs from "@/components/swipeable-tabs";
 import { useTournament } from "../../queries";
 import MatchList from "@/features/matches/components/match-list";
+import { TournamentStats } from "../tournament-stats";
 
 interface ProfileProps {
   id: string;
@@ -13,22 +15,22 @@ const Profile = ({ id }: ProfileProps) => {
   const { data: tournament } = useTournament(id);
   if (!tournament) return null;
 
-  const tabs = [
+  const tabs = useMemo(() => [
     {
       label: "Overview",
-      content: <Text p="md">Stats/Badges will go here, bracket link</Text>
+      content: <TournamentStats tournament={tournament} />
     },
     {
       label: "Matches",
       content: <MatchList matches={tournament.matches?.sort((a, b) => b.order - a.order) || []} />
     },
     {
-      label: "Teams", 
+      label: "Teams",
       content: <>
         <TeamList teams={tournament.teams || []} />
       </>
     }
-  ];
+  ], [tournament]);
 
   return <>
     <Header tournament={tournament} />

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

@@ -0,0 +1,37 @@
+import { Box, Flex, Loader } from "@mantine/core";
+import SwipeableTabs from "@/components/swipeable-tabs";
+import HeaderSkeleton from "./header-skeleton";
+
+const SkeletonLoader = () => (
+    <Flex h="30vh" w="100%" align="center" justify="center">
+        <Loader />
+    </Flex>
+)
+
+const ProfileSkeleton = () => {
+  const tabs = [
+    {
+      label: "Overview",
+      content: <SkeletonLoader />,
+    },
+    {
+      label: "Matches",
+      content: <SkeletonLoader />,
+    },
+    {
+      label: "Teams",
+      content: <SkeletonLoader />,
+    },
+  ];
+
+  return (
+    <>
+      <HeaderSkeleton />
+      <Box mt="lg">
+        <SwipeableTabs tabs={tabs} />
+      </Box>
+    </>
+  );
+};
+
+export default ProfileSkeleton;