diff --git a/packages/website/src/components/TankSearch/components/FilterControl.tsx b/packages/website/src/components/TankSearch/components/FilterControl.tsx
index faa3f276e..492a91fbc 100644
--- a/packages/website/src/components/TankSearch/components/FilterControl.tsx
+++ b/packages/website/src/components/TankSearch/components/FilterControl.tsx
@@ -6,10 +6,9 @@ import {
TIER_ROMAN_NUMERALS,
type Tier,
} from '@blitzkit/core';
-import strings from '@blitzkit/core/lang/en-US.json';
import { useStore } from '@nanostores/react';
import { ReloadIcon } from '@radix-ui/react-icons';
-import { Box, Flex, IconButton, Text, Tooltip } from '@radix-ui/themes';
+import { Box, Flex, IconButton, Text } from '@radix-ui/themes';
import { times } from 'lodash-es';
import { $tankFilters, initialTankFilters } from '../../../stores/tankFilters';
import { classIcons } from '../../ClassIcon';
@@ -40,30 +39,25 @@ export function FilterControl({ compact }: FilterControlProps) {
const selected = tankFilters.tiers?.includes(tier);
return (
-
- {
- if (tankFilters.tiers.includes(tier)) {
- $tankFilters.setKey(
- 'tiers',
- tankFilters.tiers.filter((t) => t !== tier),
- );
- } else {
- $tankFilters.setKey('tiers', [
- ...tankFilters.tiers,
- tier,
- ]);
- }
- }}
- >
- {TIER_ROMAN_NUMERALS[tier]}
-
-
+ {
+ if (tankFilters.tiers.includes(tier)) {
+ $tankFilters.setKey(
+ 'tiers',
+ tankFilters.tiers.filter((t) => t !== tier),
+ );
+ } else {
+ $tankFilters.setKey('tiers', [...tankFilters.tiers, tier]);
+ }
+ }}
+ >
+ {TIER_ROMAN_NUMERALS[tier]}
+
);
})}
@@ -73,30 +67,25 @@ export function FilterControl({ compact }: FilterControlProps) {
const selected = tankFilters.tiers?.includes(tier);
return (
-
- {
- if (tankFilters.tiers.includes(tier)) {
- $tankFilters.setKey(
- 'tiers',
- tankFilters.tiers.filter((t) => t !== tier),
- );
- } else {
- $tankFilters.setKey('tiers', [
- ...tankFilters.tiers,
- tier,
- ]);
- }
- }}
- >
- {TIER_ROMAN_NUMERALS[tier]}
-
-
+ {
+ if (tankFilters.tiers.includes(tier)) {
+ $tankFilters.setKey(
+ 'tiers',
+ tankFilters.tiers.filter((t) => t !== tier),
+ );
+ } else {
+ $tankFilters.setKey('tiers', [...tankFilters.tiers, tier]);
+ }
+ }}
+ >
+ {TIER_ROMAN_NUMERALS[tier]}
+
);
})}
@@ -114,50 +103,31 @@ export function FilterControl({ compact }: FilterControlProps) {
const selected = tankFilters.nations?.includes(nation);
return (
-
-
- // mutateTankFilters((draft) => {
- // if (draft.nations?.includes(nation)) {
- // draft.nations = draft.nations?.filter(
- // (n) => n !== nation,
- // );
- // } else {
- // draft.nations = [...(draft.nations ?? []), nation];
- // }
- // })
- {
- if (tankFilters.nations.includes(nation)) {
- $tankFilters.setKey(
- 'nations',
- tankFilters.nations.filter((n) => n !== nation),
- );
- } else {
- $tankFilters.setKey('nations', [
- ...tankFilters.nations,
- nation,
- ]);
- }
- }
+ variant={selected ? 'solid' : 'soft'}
+ color={selected ? undefined : 'gray'}
+ highContrast
+ radius="none"
+ onClick={() => {
+ if (tankFilters.nations.includes(nation)) {
+ $tankFilters.setKey(
+ 'nations',
+ tankFilters.nations.filter((n) => n !== nation),
+ );
+ } else {
+ $tankFilters.setKey('nations', [
+ ...tankFilters.nations,
+ nation,
+ ]);
}
- >
-
-
-
+ }}
+ >
+
+
);
})}
@@ -168,52 +138,32 @@ export function FilterControl({ compact }: FilterControlProps) {
const selected = tankFilters.nations?.includes(nation);
return (
-
-
- // mutateTankFilters((draft) => {
- // if (draft.nations?.includes(nation)) {
- // draft.nations = draft.nations?.filter(
- // (n) => n !== nation,
- // );
- // } else {
- // draft.nations = [...(draft.nations ?? []), nation];
- // }
- // })
- {
- if (tankFilters.nations.includes(nation)) {
- $tankFilters.setKey(
- 'nations',
- tankFilters.nations.filter((n) => n !== nation),
- );
- } else {
- $tankFilters.setKey('nations', [
- ...tankFilters.nations,
- nation,
- ]);
- }
- }
+ style={{ flex: 1 }}
+ variant={selected ? 'solid' : 'soft'}
+ color={selected ? undefined : 'gray'}
+ highContrast
+ radius="none"
+ onClick={() => {
+ if (tankFilters.nations.includes(nation)) {
+ $tankFilters.setKey(
+ 'nations',
+ tankFilters.nations.filter((n) => n !== nation),
+ );
+ } else {
+ $tankFilters.setKey('nations', [
+ ...tankFilters.nations,
+ nation,
+ ]);
}
- >
-
-
-
+ }}
+ >
+
+
);
})}
@@ -229,32 +179,28 @@ export function FilterControl({ compact }: FilterControlProps) {
const selected = tankFilters.classes?.includes(tankClass);
return (
- {
+ if (tankFilters.classes.includes(tankClass)) {
+ $tankFilters.setKey(
+ 'classes',
+ tankFilters.classes.filter((c) => c !== tankClass),
+ );
+ } else {
+ $tankFilters.setKey('classes', [
+ ...tankFilters.classes,
+ tankClass,
+ ]);
+ }
+ }}
>
- {
- if (tankFilters.classes.includes(tankClass)) {
- $tankFilters.setKey(
- 'classes',
- tankFilters.classes.filter((c) => c !== tankClass),
- );
- } else {
- $tankFilters.setKey('classes', [
- ...tankFilters.classes,
- tankClass,
- ]);
- }
- }}
- >
-
-
-
+
+
);
})}
@@ -264,109 +210,103 @@ export function FilterControl({ compact }: FilterControlProps) {
style={{ borderRadius: 'var(--radius-full)' }}
direction={compact ? 'column' : { sm: 'row', initial: 'column' }}
>
-
- {
+ if (tankFilters.types.includes(TankType.RESEARCHABLE)) {
+ $tankFilters.setKey(
+ 'types',
+ tankFilters.types.filter((t) => t !== TankType.RESEARCHABLE),
+ );
+ } else {
+ $tankFilters.setKey('types', [
+ ...tankFilters.types,
+ TankType.RESEARCHABLE,
+ ]);
}
- radius="none"
+ }}
+ >
+
+
+ {
+ if (tankFilters.types.includes(TankType.PREMIUM)) {
+ $tankFilters.setKey(
+ 'types',
+ tankFilters.types.filter((t) => t !== TankType.PREMIUM),
+ );
+ } else {
+ $tankFilters.setKey('types', [
+ ...tankFilters.types,
+ TankType.PREMIUM,
+ ]);
+ }
+ }}
+ >
+ {
- if (tankFilters.types.includes(TankType.RESEARCHABLE)) {
- $tankFilters.setKey(
- 'types',
- tankFilters.types.filter((t) => t !== TankType.RESEARCHABLE),
- );
- } else {
- $tankFilters.setKey('types', [
- ...tankFilters.types,
- TankType.RESEARCHABLE,
- ]);
- }
- }}
+ style={{ display: 'flex', justifyContent: 'center' }}
>
-
-
-
-
+
+ {
+ if (tankFilters.types.includes(TankType.COLLECTOR)) {
+ $tankFilters.setKey(
+ 'types',
+ tankFilters.types.filter((t) => t !== TankType.COLLECTOR),
+ );
+ } else {
+ $tankFilters.setKey('types', [
+ ...tankFilters.types,
+ TankType.COLLECTOR,
+ ]);
}
- radius="none"
+ }}
+ >
+ {
- if (tankFilters.types.includes(TankType.PREMIUM)) {
- $tankFilters.setKey(
- 'types',
- tankFilters.types.filter((t) => t !== TankType.PREMIUM),
- );
- } else {
- $tankFilters.setKey('types', [
- ...tankFilters.types,
- TankType.PREMIUM,
- ]);
- }
- }}
+ style={{ display: 'flex', justifyContent: 'center' }}
>
-
-
-
-
-
-
- {
- if (tankFilters.types.includes(TankType.COLLECTOR)) {
- $tankFilters.setKey(
- 'types',
- tankFilters.types.filter((t) => t !== TankType.COLLECTOR),
- );
- } else {
- $tankFilters.setKey('types', [
- ...tankFilters.types,
- TankType.COLLECTOR,
- ]);
- }
- }}
- >
-
-
-
-
-
+
+
+
-
- {
- $tankFilters.setKey('testing', 'include');
- }}
- >
-
-
-
-
-
- // mutateTankFilters((draft) => {
- // draft.testing = 'exclude';
- // })
- {
- $tankFilters.setKey('testing', 'exclude');
- }
- }
- >
-
-
-
-
-
- // mutateTankFilters((draft) => {
- // draft.testing = 'only';
- // })
- {
- $tankFilters.setKey('testing', 'only');
- }
- }
- >
-
-
-
+ {
+ $tankFilters.setKey('testing', 'include');
+ }}
+ >
+
+
+ {
+ $tankFilters.setKey('testing', 'exclude');
+ }}
+ >
+
+
+ {
+ $tankFilters.setKey('testing', 'only');
+ }}
+ >
+
+