swipeable tabs using mantine carousel

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

@@ -3,18 +3,38 @@ import Header from "./header";
 import { testEvent } from "@/utils/test-event";
 import { Player } from "@/features/players/types";
 import TeamList from "@/features/teams/components/team-list";
+import SwipeableTabs from "@/components/swipeable-tabs";
 
 interface ProfileProps {
   player: Player;
 }
 
 const Profile = ({ player }: ProfileProps) => {
+  const tabs = [
+    {
+      label: "Overview",
+      content: <Text p="md">Panel 1 content</Text>
+    },
+    {
+      label: "Teams", 
+      content: <Text p="md">Panel 2 content</Text>
+    },
+    {
+      label: "Stats",
+      content: <Text p="md">Panel 3 content</Text>
+    }
+  ];
 
   return <>
     <Header player={player} />
     <Box m='sm' mt='lg'>
-      <Text size='xl' fw={600}>Teams</Text>
-      <TeamList teams={player.teams ?? []} />
+      <SwipeableTabs
+        tabs={tabs}
+        defaultTab={0}
+        onTabChange={(index, tab) => {
+          console.log(`Switched to ${tab.label} tab`);
+        }}
+      />
     </Box>
   </>;
 };