player h2h

src/app/routes/_authed/stats.tsx

@@ -4,6 +4,9 @@ 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";
 
 export const Route = createFileRoute("/_authed/stats")({
   component: Stats,
@@ -17,12 +20,27 @@ export const Route = createFileRoute("/_authed/stats")({
     header: {
       title: "Player Stats"
     },
-        refresh: [playerQueries.allStats().queryKey],
+    refresh: [playerQueries.allStats().queryKey],
   }),
 });
 
 function Stats() {
-  return <Suspense fallback={<PlayerStatsTableSkeleton />}>
-    <PlayerStatsTable />
-  </Suspense>;
+  const tabs = [
+    {
+      label: "Stats",
+      content: (
+        <Suspense fallback={<PlayerStatsTableSkeleton />}>
+          <PlayerStatsTable />
+        </Suspense>
+      ),
+    },
+    {
+      label: "Head to Head",
+      content: <LeagueHeadToHead />,
+    },
+  ];
+
+  return <Box mt={-20}>
+    <SwipeableTabs mb={0} tabs={tabs} />
+  </Box>;
 }