feat: migrate performance

packages/website/src/components/Performance/PlayerCountControl.tsx

@@ -0,0 +1,46 @@
+import { Flex, Select, Text } from '@radix-ui/themes';
+import { TankPerformancePersistent } from '../../stores/tankPerformancePersistent';
+import { PlayerCountPeriod } from '../../stores/tankPerformancePersistent/constants';
+
+export function PlayerCountControl() {
+  const playerCountPeriod = TankPerformancePersistent.use(
+    (state) => state.playerCountPeriod,
+  );
+  const mutateTankPerformanceSort = TankPerformancePersistent.useMutation();
+
+  return (
+    <Flex justify="center" align="center" gap="2">
+      <Text>Player count</Text>
+      <Select.Root
+        value={playerCountPeriod}
+        onValueChange={(period) => {
+          mutateTankPerformanceSort((draft) => {
+            draft.playerCountPeriod = period as PlayerCountPeriod;
+          });
+        }}
+      >
+        <Select.Trigger />
+        <Select.Content>
+          <Select.Item value={PlayerCountPeriod.Past120Days}>
+            Past 120 days
+          </Select.Item>
+          <Select.Item value={PlayerCountPeriod.Past90Days}>
+            Past 90 days
+          </Select.Item>
+          <Select.Item value={PlayerCountPeriod.Past60Days}>
+            Past 60 days
+          </Select.Item>
+          <Select.Item value={PlayerCountPeriod.ThisMonth}>
+            This month
+          </Select.Item>
+          <Select.Item value={PlayerCountPeriod.ThisWeek}>
+            This week
+          </Select.Item>
+          <Select.Item value={PlayerCountPeriod.Yesterday}>
+            Yesterday
+          </Select.Item>
+        </Select.Content>
+      </Select.Root>
+    </Flex>
+  );
+}