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

import { Flex, Select, Text } from '@radix-ui/themes';
import { useLocale } from '../../hooks/useLocale';
import {
  TankPerformanceEphemeral,
  type PlayerCountPeriod,
} from '../../stores/tankPerformanceEphemeral';

export function PlayerCountControl() {
  const playerCountPeriod = TankPerformanceEphemeral.use(
    (state) => state.playerCountPeriod,
  );
  const mutateTankPerformanceSort = TankPerformanceEphemeral.useMutation();
  const { strings } = useLocale();

  return (
    <Flex justify="center" align="center" gap="2">
      <Text>{strings.website.tools.performance.player_count.label}</Text>
      <Select.Root
        value={playerCountPeriod}
        onValueChange={(period) => {
          mutateTankPerformanceSort((draft) => {
            draft.playerCountPeriod = period as PlayerCountPeriod;
          });
        }}
      >
        <Select.Trigger />
        <Select.Content>
          <Select.Item value="total">
            {strings.common.player_count_period.total}
          </Select.Item>
          <Select.Item value="d_120">
            {strings.common.player_count_period.d_120}
          </Select.Item>
          <Select.Item value="d_90">
            {strings.common.player_count_period.d_90}
          </Select.Item>
          <Select.Item value="d_60">
            {strings.common.player_count_period.d_60}
          </Select.Item>
          <Select.Item value="d_30">
            {strings.common.player_count_period.d_30}
          </Select.Item>
          <Select.Item value="d_7">
            {strings.common.player_count_period.d_7}
          </Select.Item>
          <Select.Item value="d_1">
            {strings.common.player_count_period.d_1}
          </Select.Item>
        </Select.Content>
      </Select.Root>
    </Flex>
  );
}