regionals

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

@@ -1,10 +1,10 @@
-import { Box, Stack, Text, Divider } from "@mantine/core";
-import { Suspense } from "react";
+import { Box, Stack, Text, Divider, Group, Button } from "@mantine/core";
+import { Suspense, useState, useDeferredValue } from "react";
 import Header from "./header";
 import SwipeableTabs from "@/components/swipeable-tabs";
 import { usePlayer, usePlayerMatches, usePlayerStats } from "../../queries";
 import TeamList from "@/features/teams/components/team-list";
-import StatsOverview from "@/components/stats-overview";
+import StatsOverview, { StatsSkeleton } from "@/components/stats-overview";
 import MatchList from "@/features/matches/components/match-list";
 import BadgeShowcase from "@/features/badges/components/badge-showcase";
 import BadgeShowcaseSkeleton from "@/features/badges/components/badge-showcase-skeleton";
@@ -13,10 +13,38 @@ interface ProfileProps {
   id: string;
 }
 
+const StatsWithFilter = ({ id }: { id: string }) => {
+  const [viewType, setViewType] = useState<'all' | 'mainline' | 'regional'>('all');
+  const deferredViewType = useDeferredValue(viewType);
+  const isStale = viewType !== deferredViewType;
+
+  return (
+    <Stack>
+      <Group gap="xs" px="md" justify="space-between" align="center">
+        <Text size="md" fw={700}>Statistics</Text>
+        <Group gap="xs">
+          <Button variant={viewType === 'all' ? 'filled' : 'light'} size="compact-xs" onClick={() => setViewType('all')}>All</Button>
+          <Button variant={viewType === 'mainline' ? 'filled' : 'light'} size="compact-xs" onClick={() => setViewType('mainline')}>Mainline</Button>
+          <Button variant={viewType === 'regional' ? 'filled' : 'light'} size="compact-xs" onClick={() => setViewType('regional')}>Regional</Button>
+        </Group>
+      </Group>
+      <Box style={{ opacity: isStale ? 0.6 : 1, transition: 'opacity 150ms' }}>
+        <Suspense key={deferredViewType} fallback={<StatsSkeleton />}>
+          <StatsContent id={id} viewType={deferredViewType} />
+        </Suspense>
+      </Box>
+    </Stack>
+  );
+};
+
+const StatsContent = ({ id, viewType }: { id: string; viewType: 'all' | 'mainline' | 'regional' }) => {
+  const { data: stats, isLoading: statsLoading } = usePlayerStats(id, viewType);
+  return <StatsOverview statsData={stats} isLoading={statsLoading} />;
+};
+
 const Profile = ({ id }: ProfileProps) => {
   const { data: player } = usePlayer(id);
   const { data: matches } = usePlayerMatches(id);
-  const { data: stats, isLoading: statsLoading } = usePlayerStats(id);
 
   const tabs = [
     {
@@ -29,10 +57,7 @@ const Profile = ({ id }: ProfileProps) => {
           </Suspense>
         </Stack>
         <Divider my="md" />
-        <Stack>
-          <Text px="md" size="md" fw={700}>Statistics</Text>
-          <StatsOverview statsData={stats} isLoading={statsLoading} />
-        </Stack>
+        <StatsWithFilter id={id} />
       </>,
     },
     {