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'); + }} + > + +