init

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

@@ -0,0 +1,22 @@
+import { Flex, Title } from "@mantine/core";
+import Avatar from "@/components/avatar";
+import { Team } from "../../types";
+
+interface HeaderProps {
+  team: Team;
+}
+
+const Header = ({ team }: HeaderProps) => {
+  return (
+    <>
+      <Flex px='xl' w='100%' align='self-end' gap='md'>
+        <Avatar radius='sm' name={team.name} size={125} />
+        <Flex align='center' justify='center' gap={4} pb={20} w='100%'>
+          <Title ta='center' order={2}>{team.name}</Title>
+        </Flex>
+      </Flex>
+    </>
+  )
+};
+
+export default Header;

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

@@ -0,0 +1,21 @@
+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";
+
+interface ProfileProps {
+  team: Team;
+}
+
+const TeamProfile = ({ team }: ProfileProps) => {
+  return <>
+    <Header team={team} />
+    <Box m='sm' mt='lg'>
+      <Text size='xl' fw={600}>Players</Text>
+      <PlayerList players={team.players} />
+    </Box>
+  </>;
+};
+
+export default TeamProfile;