significant refactor

src/features/teams/components/team-profile/index.tsx

@@ -1,39 +1,43 @@
 import { Box, Text } from "@mantine/core";
 import Header from "./header";
-import TeamList from "@/features/teams/components/team-list";
-import { Team } from "../../types";
-import PlayerList from "@/features/players/components/player-list";
 import SwipeableTabs from "@/components/swipeable-tabs";
 import TournamentList from "@/features/tournaments/components/tournament-list";
+import { useTeam } from "../../queries";
 
 interface ProfileProps {
-  team: Team;
+  id: string;
 }
 
-const TeamProfile = ({ team }: ProfileProps) => {
-  console.log(team);
+const TeamProfile = ({ id }: ProfileProps) => {
+  const { data: team } = useTeam(id);
+  if (!team) return <Text p="md">Team not found</Text>;
+
   const tabs = [
     {
       label: "Overview",
-      content: <Text p="md">Stats/Badges will go here</Text>
+      content: <Text p="md">Stats/Badges will go here</Text>,
     },
     {
       label: "Matches",
-      content: <Text p="md">Matches feed will go here</Text>
+      content: <Text p="md">Matches feed will go here</Text>,
     },
     {
-      label: "Tournaments", 
-      content: <>
-        <TournamentList tournaments={team.tournaments || []} />
-      </>
-    }
+      label: "Tournaments",
+      content: (
+        <>
+          <TournamentList tournaments={team.tournaments || []} />
+        </>
+      ),
+    },
   ];
-  return <>
-    <Header team={team} />
-    <Box m='sm' mt='lg'>
-      <SwipeableTabs tabs={tabs} />
-    </Box>
-  </>;
+  return (
+    <>
+      <Header name={team.name} logo={team.logo} />
+      <Box m="sm" mt="lg">
+        <SwipeableTabs tabs={tabs} />
+      </Box>
+    </>
+  );
 };
 
 export default TeamProfile;