fix tabs on stats table

src/app/routes/_authed/stats.tsx

@@ -4,9 +4,8 @@ import PlayerStatsTable from "@/features/players/components/player-stats-table";
 import { Suspense } from "react";
 import PlayerStatsTableSkeleton from "@/features/players/components/player-stats-table-skeleton";
 import { prefetchServerQuery } from "@/lib/tanstack-query/utils/prefetch";
-import SwipeableTabs from "@/components/swipeable-tabs";
 import LeagueHeadToHead from "@/features/players/components/league-head-to-head";
-import { Box } from "@mantine/core";
+import { Tabs } from "@mantine/core";
 
 export const Route = createFileRoute("/_authed/stats")({
   component: Stats,
@@ -25,22 +24,22 @@ export const Route = createFileRoute("/_authed/stats")({
 });
 
 function Stats() {
-  const tabs = [
-    {
-      label: "Stats",
-      content: (
+  return (
+    <Tabs defaultValue="stats">
+      <Tabs.List grow>
+        <Tabs.Tab value="stats">Stats</Tabs.Tab>
+        <Tabs.Tab value="h2h">Head to Head</Tabs.Tab>
+      </Tabs.List>
+
+      <Tabs.Panel value="stats">
         <Suspense fallback={<PlayerStatsTableSkeleton />}>
           <PlayerStatsTable />
         </Suspense>
-      ),
-    },
-    {
-      label: "Head to Head",
-      content: <LeagueHeadToHead />,
-    },
-  ];
+      </Tabs.Panel>
 
-  return <Box mt={-20}>
-    <SwipeableTabs mb={0} tabs={tabs} />
-  </Box>;
+      <Tabs.Panel value="h2h">
+        <LeagueHeadToHead />
+      </Tabs.Panel>
+    </Tabs>
+  );
 }