feat: update filtering

constants/operators.ts

@@ -52,20 +52,110 @@ export const HELMET = [
   '[CAMOED]',
   '[CYPHERED]',
   '[REDACTED]',
+  'Aquaflux cybernetic goggles',
+  'Aquamarine immersive visor',
+  'Aureate cybernetic goggles',
+  'Aureate cypher gaiter',
+  'Aureate harlequin mask',
   'Aurora crested helm',
+  'Brimstone mindguard',
+  'Brimstone nebula visor',
+  'Canopy cybernetic goggles',
+  'Canopy versatility goggles',
   'Celestial crested helm',
+  'Cobalt mindguard',
+  'Cobalt technomancer helm',
+  'Cyberglow spartan hawk',
   'Ethereal crested helm',
+  'Ferrous spartan hawk',
+  'Gaudy immersive visor',
+  'Garnet harlequin mask',
+  'Holochrome spartan hawk',
+  'Indigo cypher gaiter',
+  'Inferno cybernetic goggles',
+  'Inferno cypher gaiter',
+  'Inferno immersive visor',
+  'Inferno mindguard',
+  'Inferno versatility goggles',
+  'Iodine technomancer helm',
+  'Iolite harlequin mask',
+  'Iridium mindguard',
+  'Jade harlequin mask',
+  'Marine versatility goggles',
+  'Mercurial cypher gaiter',
+  'Mercurial mindguard',
+  'Neon cybernetic goggles',
+  'Neon spartan hawk',
+  'Neon technomancer helm',
+  'Nightshade immersive visor',
+  'Nightshade nebula visor',
+  'Onyx harlequin mask',
+  'Oxide nebula visor',
+  'Oxide technomancer helm',
   'Regal crested helm',
+  'Sulphur technomancer helm',
+  'Sulphur versatility goggles',
+  'Tempest nebula visor',
+  'Twilight cypher gaiter',
   'Verdant crested helm',
+  'Verdigris spartan hawk',
+  'Vespa nebula visor',
+  'Wisteria immersive visor',
+  'Zenith versatility goggles',
 ]
 
 export const JACKET = [
   '[CAMOED]',
   '[CYPHERED]',
   '[REDACTED]',
+  'Amethyst bomber jacket',
+  'Amethyst coveralls',
+  'Amethyst cowl',
   'Amethyst frock coat',
+  'Amethyst funnel neck',
+  'Amethyst fusion mantle',
+  'Amethyst hoody',
+  'Amethyst sakáki',
+  'Amethyst tactical jacket',
+  'Azure obscurer',
+  'Canopy obscurer',
+  'Carmine bomber jacket',
+  'Carmine coveralls',
+  'Carmine cowl',
   'Carmine frock coat',
+  'Carmine funnel neck',
+  'Carmine fusion mantle',
+  'Carmine hoody',
+  'Carmine obscurer',
+  'Carmine sakáki',
+  'Carmine tactical jacket',
   'Cobalt frock coat',
+  'Cyan bomber jacket',
+  'Cyan coveralls',
+  'Cyan cowl',
+  'Cyan funnel neck',
+  'Cyan fusion mantle',
+  'Cyan hoody',
+  'Cyan sakáki',
+  'Cyan tactical jacket',
+  'Digital gold bomber jacket',
+  'Digital gold coveralls',
+  'Digital gold cowl',
+  'Digital gold funnel neck',
+  'Digital gold fusion mantle',
+  'Digital gold hoody',
+  'Digital gold sakáki',
+  'Digital gold tactical jacket',
+  'Dusk obscurer',
+  'Emerald bomber jacket',
+  'Emerald coveralls',
+  'Emerald cowl',
   'Emerald frock coat',
+  'Emerald funnel neck',
+  'Emerald fusion mantle',
+  'Emerald hoody',
+  'Emerald sakáki',
+  'Emerald tactical jacket',
   'Sulphur frock coat',
+  'Sunset obscurer',
 ]

data/operators.json

@@ -5901,7 +5901,7 @@
         "background": "Rust",
         "skin": "IC1",
         "helmet": "Inferno versatility goggles",
-        "jacket": "Cyan tactical jacke",
+        "jacket": "Cyan tactical jacket",
         "image_400_url": "https://ordinal-operators.s3.amazonaws.com/Polymaths/400/Vigilant_Stealthy_Polymath.gif",
         "image_400_jpeg_url": "https://ordinal-operators.s3.amazonaws.com/Polymaths/400/Vigilant_Stealthy_Polymath.jpeg"
       },
@@ -6374,7 +6374,7 @@
         "background": "Phantom",
         "skin": "IC1",
         "helmet": "Marine versatility goggles",
-        "jacket": "Cyan tactical jacke",
+        "jacket": "Cyan tactical jacket",
         "image_400_url": "https://ordinal-operators.s3.amazonaws.com/Polymaths/400/Vigilant_Silent_Polymath.gif",
         "image_400_jpeg_url": "https://ordinal-operators.s3.amazonaws.com/Polymaths/400/Vigilant_Silent_Polymath.jpeg"
       },
@@ -6506,7 +6506,7 @@
         "background": "Mariana",
         "skin": "IC1",
         "helmet": "Sulphur versatility goggles",
-        "jacket": "Cyan tactical jacke",
+        "jacket": "Cyan tactical jacket",
         "image_400_url": "https://ordinal-operators.s3.amazonaws.com/Polymaths/400/Fragmented_Stealthy_Polymath.gif",
         "image_400_jpeg_url": "https://ordinal-operators.s3.amazonaws.com/Polymaths/400/Fragmented_Stealthy_Polymath.jpeg"
       },
@@ -6539,7 +6539,7 @@
         "background": "Sulphur",
         "skin": "IC1",
         "helmet": "Sulphur versatility goggles",
-        "jacket": "Cyan tactical jacke",
+        "jacket": "Cyan tactical jacket",
         "image_400_url": "https://ordinal-operators.s3.amazonaws.com/Polymaths/400/Enigmatic_Unseen_Polymath.gif",
         "image_400_jpeg_url": "https://ordinal-operators.s3.amazonaws.com/Polymaths/400/Enigmatic_Unseen_Polymath.jpeg"
       },
@@ -6737,7 +6737,7 @@
         "background": "Marooned",
         "skin": "IC6",
         "helmet": "Marine versatility goggles",
-        "jacket": "Cyan tactical jacke",
+        "jacket": "Cyan tactical jacket",
         "image_400_url": "https://ordinal-operators.s3.amazonaws.com/Polymaths/400/Arcane_Dissident_Polymath.gif",
         "image_400_jpeg_url": "https://ordinal-operators.s3.amazonaws.com/Polymaths/400/Arcane_Dissident_Polymath.jpeg"
       },
@@ -6770,7 +6770,7 @@
         "background": "Mariana",
         "skin": "IC4",
         "helmet": "Marine versatility goggles",
-        "jacket": "Cyan tactical jacke",
+        "jacket": "Cyan tactical jacket",
         "image_400_url": "https://ordinal-operators.s3.amazonaws.com/Polymaths/400/Unseen_Radical_Polymath.gif",
         "image_400_jpeg_url": "https://ordinal-operators.s3.amazonaws.com/Polymaths/400/Unseen_Radical_Polymath.jpeg"
       },
@@ -6946,7 +6946,7 @@
         "background": "Nightfall",
         "skin": "IC1",
         "helmet": "Inferno versatility goggles",
-        "jacket": "Cyan tactical jacke",
+        "jacket": "Cyan tactical jacket",
         "image_400_url": "https://ordinal-operators.s3.amazonaws.com/Polymaths/400/Dissident_Autonomous_Polymath.gif",
         "image_400_jpeg_url": "https://ordinal-operators.s3.amazonaws.com/Polymaths/400/Dissident_Autonomous_Polymath.jpeg"
       },
@@ -7309,7 +7309,7 @@
         "background": "Mariana",
         "skin": "IC1",
         "helmet": "Inferno versatility goggles",
-        "jacket": "Cyan tactical jacke",
+        "jacket": "Cyan tactical jacket",
         "image_400_url": "https://ordinal-operators.s3.amazonaws.com/Polymaths/400/Autonomous_Occult_Polymath.gif",
         "image_400_jpeg_url": "https://ordinal-operators.s3.amazonaws.com/Polymaths/400/Autonomous_Occult_Polymath.jpeg"
       },
@@ -7342,7 +7342,7 @@
         "background": "Marooned",
         "skin": "IC3",
         "helmet": "Inferno versatility goggles",
-        "jacket": "Cyan tactical jacke",
+        "jacket": "Cyan tactical jacket",
         "image_400_url": "https://ordinal-operators.s3.amazonaws.com/Polymaths/400/Subversive_Dissident_Polymath.gif",
         "image_400_jpeg_url": "https://ordinal-operators.s3.amazonaws.com/Polymaths/400/Subversive_Dissident_Polymath.jpeg"
       },
@@ -7463,7 +7463,7 @@
         "background": "Sulphur",
         "skin": "IC1",
         "helmet": "Inferno versatility goggles",
-        "jacket": "Cyan tactical jacke",
+        "jacket": "Cyan tactical jacket",
         "image_400_url": "https://ordinal-operators.s3.amazonaws.com/Polymaths/400/Arcane_Autonomous_Polymath.gif",
         "image_400_jpeg_url": "https://ordinal-operators.s3.amazonaws.com/Polymaths/400/Arcane_Autonomous_Polymath.jpeg"
       },
@@ -7606,7 +7606,7 @@
         "background": "Void",
         "skin": "IC3",
         "helmet": "Canopy versatility goggles",
-        "jacket": "Cyan tactical jacke",
+        "jacket": "Cyan tactical jacket",
         "image_400_url": "https://ordinal-operators.s3.amazonaws.com/Polymaths/400/Cryptic_Nomadic_Polymath.gif",
         "image_400_jpeg_url": "https://ordinal-operators.s3.amazonaws.com/Polymaths/400/Cryptic_Nomadic_Polymath.jpeg"
       },
@@ -7639,7 +7639,7 @@
         "background": "Sanguine",
         "skin": "IC3",
         "helmet": "Zenith versatility goggles",
-        "jacket": "Cyan tactical jacke",
+        "jacket": "Cyan tactical jacket",
         "image_400_url": "https://ordinal-operators.s3.amazonaws.com/Polymaths/400/Cryptic_Radical_Polymath.gif",
         "image_400_jpeg_url": "https://ordinal-operators.s3.amazonaws.com/Polymaths/400/Cryptic_Radical_Polymath.jpeg"
       },
@@ -7650,7 +7650,7 @@
         "background": "Cypress",
         "skin": "IC2",
         "helmet": "Inferno versatility goggles",
-        "jacket": "Cyan tactical jacke",
+        "jacket": "Cyan tactical jacket",
         "image_400_url": "https://ordinal-operators.s3.amazonaws.com/Polymaths/400/Sovereign_Quantum_Polymath.gif",
         "image_400_jpeg_url": "https://ordinal-operators.s3.amazonaws.com/Polymaths/400/Sovereign_Quantum_Polymath.jpeg"
       },
@@ -7837,7 +7837,7 @@
         "background": "Marooned",
         "skin": "IC2",
         "helmet": "Zenith versatility goggles",
-        "jacket": "Cyan tactical jacke",
+        "jacket": "Cyan tactical jacket",
         "image_400_url": "https://ordinal-operators.s3.amazonaws.com/Polymaths/400/Vigilant_Enigmatic_Polymath.gif",
         "image_400_jpeg_url": "https://ordinal-operators.s3.amazonaws.com/Polymaths/400/Vigilant_Enigmatic_Polymath.jpeg"
       },
@@ -7991,7 +7991,7 @@
         "background": "Sulphur",
         "skin": "IC1",
         "helmet": "Canopy versatility goggles",
-        "jacket": "Cyan tactical jacke",
+        "jacket": "Cyan tactical jacket",
         "image_400_url": "https://ordinal-operators.s3.amazonaws.com/Polymaths/400/Vigilant_Nocturnal_Polymath.gif",
         "image_400_jpeg_url": "https://ordinal-operators.s3.amazonaws.com/Polymaths/400/Vigilant_Nocturnal_Polymath.jpeg"
       },
@@ -8475,7 +8475,7 @@
         "background": "Cypress",
         "skin": "IC3",
         "helmet": "Zenith versatility goggles",
-        "jacket": "Cyan tactical jacke",
+        "jacket": "Cyan tactical jacket",
         "image_400_url": "https://ordinal-operators.s3.amazonaws.com/Polymaths/400/Augmented_Defiant_Polymath.gif",
         "image_400_jpeg_url": "https://ordinal-operators.s3.amazonaws.com/Polymaths/400/Augmented_Defiant_Polymath.jpeg"
       },
@@ -8519,7 +8519,7 @@
         "background": "Sanguine",
         "skin": "IC6",
         "helmet": "Marine versatility goggles",
-        "jacket": "Cyan tactical jacke",
+        "jacket": "Cyan tactical jacket",
         "image_400_url": "https://ordinal-operators.s3.amazonaws.com/Polymaths/400/Ciphered_Dissident_Polymath.gif",
         "image_400_jpeg_url": "https://ordinal-operators.s3.amazonaws.com/Polymaths/400/Ciphered_Dissident_Polymath.jpeg"
       },
@@ -8530,7 +8530,7 @@
         "background": "Mariana",
         "skin": "IC6",
         "helmet": "Zenith versatility goggles",
-        "jacket": "Cyan tactical jacke",
+        "jacket": "Cyan tactical jacket",
         "image_400_url": "https://ordinal-operators.s3.amazonaws.com/Polymaths/400/Unseen_Paradoxical_Polymath.gif",
         "image_400_jpeg_url": "https://ordinal-operators.s3.amazonaws.com/Polymaths/400/Unseen_Paradoxical_Polymath.jpeg"
       },
@@ -8937,7 +8937,7 @@
         "background": "Nightfall",
         "skin": "IC1",
         "helmet": "Marine versatility goggles",
-        "jacket": "Cyan tactical jacke",
+        "jacket": "Cyan tactical jacket",
         "image_400_url": "https://ordinal-operators.s3.amazonaws.com/Polymaths/400/Radical_Covert_Polymath.gif",
         "image_400_jpeg_url": "https://ordinal-operators.s3.amazonaws.com/Polymaths/400/Radical_Covert_Polymath.jpeg"
       },
@@ -9564,7 +9564,7 @@
         "background": "Nightfall",
         "skin": "IC4",
         "helmet": "Canopy versatility goggles",
-        "jacket": "Cyan tactical jacke",
+        "jacket": "Cyan tactical jacket",
         "image_400_url": "https://ordinal-operators.s3.amazonaws.com/Polymaths/400/Unseen_Anarchic_Polymath.gif",
         "image_400_jpeg_url": "https://ordinal-operators.s3.amazonaws.com/Polymaths/400/Unseen_Anarchic_Polymath.jpeg"
       },
@@ -9597,7 +9597,7 @@
         "background": "Phantom",
         "skin": "IC1",
         "helmet": "Zenith versatility goggles",
-        "jacket": "Cyan tactical jacke",
+        "jacket": "Cyan tactical jacket",
         "image_400_url": "https://ordinal-operators.s3.amazonaws.com/Polymaths/400/Defiant_Inquisitive_Polymath.gif",
         "image_400_jpeg_url": "https://ordinal-operators.s3.amazonaws.com/Polymaths/400/Defiant_Inquisitive_Polymath.jpeg"
       },
@@ -9663,7 +9663,7 @@
         "background": "Marooned",
         "skin": "IC3",
         "helmet": "Inferno versatility goggles",
-        "jacket": "Cyan tactical jacke",
+        "jacket": "Cyan tactical jacket",
         "image_400_url": "https://ordinal-operators.s3.amazonaws.com/Polymaths/400/Spectral_Nocturnal_Polymath.gif",
         "image_400_jpeg_url": "https://ordinal-operators.s3.amazonaws.com/Polymaths/400/Spectral_Nocturnal_Polymath.jpeg"
       },
@@ -9751,7 +9751,7 @@
         "background": "Sanguine",
         "skin": "IC1",
         "helmet": "Zenith versatility goggles",
-        "jacket": "Cyan tactical jacke",
+        "jacket": "Cyan tactical jacket",
         "image_400_url": "https://ordinal-operators.s3.amazonaws.com/Polymaths/400/Recursive_Temporal_Polymath.gif",
         "image_400_jpeg_url": "https://ordinal-operators.s3.amazonaws.com/Polymaths/400/Recursive_Temporal_Polymath.jpeg"
       },
@@ -9905,7 +9905,7 @@
         "background": "Nightfall",
         "skin": "IC3",
         "helmet": "Inferno versatility goggles",
-        "jacket": "Cyan tactical jacke",
+        "jacket": "Cyan tactical jacket",
         "image_400_url": "https://ordinal-operators.s3.amazonaws.com/Polymaths/400/Silent_Temporal_Polymath.gif",
         "image_400_jpeg_url": "https://ordinal-operators.s3.amazonaws.com/Polymaths/400/Silent_Temporal_Polymath.jpeg"
       },
@@ -10081,7 +10081,7 @@
         "background": "Phantom",
         "skin": "IC2",
         "helmet": "Canopy versatility goggles",
-        "jacket": "Cyan tactical jacke",
+        "jacket": "Cyan tactical jacket",
         "image_400_url": "https://ordinal-operators.s3.amazonaws.com/Polymaths/400/Unseen_Rogue_Polymath.gif",
         "image_400_jpeg_url": "https://ordinal-operators.s3.amazonaws.com/Polymaths/400/Unseen_Rogue_Polymath.jpeg"
       },
@@ -10158,7 +10158,7 @@
         "background": "LimeWire",
         "skin": "IC1",
         "helmet": "Zenith versatility goggles",
-        "jacket": "Cyan tactical jacke",
+        "jacket": "Cyan tactical jacket",
         "image_400_url": "https://ordinal-operators.s3.amazonaws.com/Polymaths/400/Sovereign_Nomadic_Polymath.gif",
         "image_400_jpeg_url": "https://ordinal-operators.s3.amazonaws.com/Polymaths/400/Sovereign_Nomadic_Polymath.jpeg"
       },
@@ -10191,7 +10191,7 @@
         "background": "Rust",
         "skin": "IC3",
         "helmet": "Sulphur versatility goggles",
-        "jacket": "Cyan tactical jacke",
+        "jacket": "Cyan tactical jacket",
         "image_400_url": "https://ordinal-operators.s3.amazonaws.com/Polymaths/400/Dystopian_Covert_Polymath.gif",
         "image_400_jpeg_url": "https://ordinal-operators.s3.amazonaws.com/Polymaths/400/Dystopian_Covert_Polymath.jpeg"
       },
@@ -10301,7 +10301,7 @@
         "background": "Marooned",
         "skin": "IC3",
         "helmet": "Zenith versatility goggles",
-        "jacket": "Cyan tactical jacke",
+        "jacket": "Cyan tactical jacket",
         "image_400_url": "https://ordinal-operators.s3.amazonaws.com/Polymaths/400/Fractal_Fragmented_Polymath.gif",
         "image_400_jpeg_url": "https://ordinal-operators.s3.amazonaws.com/Polymaths/400/Fractal_Fragmented_Polymath.jpeg"
       },
@@ -10356,7 +10356,7 @@
         "background": "Sulphur",
         "skin": "IC3",
         "helmet": "Canopy versatility goggles",
-        "jacket": "Cyan tactical jacke",
+        "jacket": "Cyan tactical jacket",
         "image_400_url": "https://ordinal-operators.s3.amazonaws.com/Polymaths/400/Recursive_Disruptive_Polymath.gif",
         "image_400_jpeg_url": "https://ordinal-operators.s3.amazonaws.com/Polymaths/400/Recursive_Disruptive_Polymath.jpeg"
       },
@@ -10587,7 +10587,7 @@
         "background": "Phantom",
         "skin": "IC6",
         "helmet": "Zenith versatility goggles",
-        "jacket": "Cyan tactical jacke",
+        "jacket": "Cyan tactical jacket",
         "image_400_url": "https://ordinal-operators.s3.amazonaws.com/Polymaths/400/Paradoxical_Dissident_Polymath.gif",
         "image_400_jpeg_url": "https://ordinal-operators.s3.amazonaws.com/Polymaths/400/Paradoxical_Dissident_Polymath.jpeg"
       },
@@ -10598,7 +10598,7 @@
         "background": "LimeWire",
         "skin": "IC3",
         "helmet": "Inferno versatility goggles",
-        "jacket": "Cyan tactical jacke",
+        "jacket": "Cyan tactical jacket",
         "image_400_url": "https://ordinal-operators.s3.amazonaws.com/Polymaths/400/Inquisitive_Ciphered_Polymath.gif",
         "image_400_jpeg_url": "https://ordinal-operators.s3.amazonaws.com/Polymaths/400/Inquisitive_Ciphered_Polymath.jpeg"
       },
@@ -10620,7 +10620,7 @@
         "background": "Phantom",
         "skin": "IC4",
         "helmet": "Sulphur versatility goggles",
-        "jacket": "Cyan tactical jacke",
+        "jacket": "Cyan tactical jacket",
         "image_400_url": "https://ordinal-operators.s3.amazonaws.com/Polymaths/400/Paradoxical_Nocturnal_Polymath.gif",
         "image_400_jpeg_url": "https://ordinal-operators.s3.amazonaws.com/Polymaths/400/Paradoxical_Nocturnal_Polymath.jpeg"
       },
@@ -10686,7 +10686,7 @@
         "background": "Cypress",
         "skin": "IC1",
         "helmet": "Marine versatility goggles",
-        "jacket": "Cyan tactical jacke",
+        "jacket": "Cyan tactical jacket",
         "image_400_url": "https://ordinal-operators.s3.amazonaws.com/Polymaths/400/Dystopian_Disruptive_Polymath.gif",
         "image_400_jpeg_url": "https://ordinal-operators.s3.amazonaws.com/Polymaths/400/Dystopian_Disruptive_Polymath.jpeg"
       },
@@ -10730,7 +10730,7 @@
         "background": "Sulphur",
         "skin": "IC2",
         "helmet": "Inferno versatility goggles",
-        "jacket": "Cyan tactical jacke",
+        "jacket": "Cyan tactical jacket",
         "image_400_url": "https://ordinal-operators.s3.amazonaws.com/Polymaths/400/Recursive_Autonomous_Polymath.gif",
         "image_400_jpeg_url": "https://ordinal-operators.s3.amazonaws.com/Polymaths/400/Recursive_Autonomous_Polymath.jpeg"
       },
@@ -10741,7 +10741,7 @@
         "background": "Cypress",
         "skin": "IC1",
         "helmet": "Canopy versatility goggles",
-        "jacket": "Cyan tactical jacke",
+        "jacket": "Cyan tactical jacket",
         "image_400_url": "https://ordinal-operators.s3.amazonaws.com/Polymaths/400/Ethereal_Cryptic_Polymath.gif",
         "image_400_jpeg_url": "https://ordinal-operators.s3.amazonaws.com/Polymaths/400/Ethereal_Cryptic_Polymath.jpeg"
       },
@@ -10851,7 +10851,7 @@
         "background": "Nightfall",
         "skin": "IC6",
         "helmet": "Canopy versatility goggles",
-        "jacket": "Cyan tactical jacke",
+        "jacket": "Cyan tactical jacket",
         "image_400_url": "https://ordinal-operators.s3.amazonaws.com/Polymaths/400/Ethereal_Anarchic_Polymath.gif",
         "image_400_jpeg_url": "https://ordinal-operators.s3.amazonaws.com/Polymaths/400/Ethereal_Anarchic_Polymath.jpeg"
       },
@@ -10873,7 +10873,7 @@
         "background": "Nightfall",
         "skin": "IC1",
         "helmet": "Inferno versatility goggles",
-        "jacket": "Cyan tactical jacke",
+        "jacket": "Cyan tactical jacket",
         "image_400_url": "https://ordinal-operators.s3.amazonaws.com/Polymaths/400/Sovereign_Defiant_Polymath.gif",
         "image_400_jpeg_url": "https://ordinal-operators.s3.amazonaws.com/Polymaths/400/Sovereign_Defiant_Polymath.jpeg"
       },

src/components/Dropdown/Dropdown.tsx

@@ -84,14 +84,16 @@ const Dropdown: React.FC<DropdownProps> = ({
       </DropdownHeader>
       {isExpanded && (
         <DropdownContent>
-          {options.map((option, index) => (
+          <ScrollDiv>
-            <Checkbox
+            {options.map((option, index) => (
-              key={index}
+              <Checkbox
-              checked={selectedOptions.includes(option)}
+                key={index}
-              onChange={() => handleSelect(option)}
+                checked={selectedOptions.includes(option)}
-              label={option}
+                onChange={() => handleSelect(option)}
-            />
+                label={option}
-          ))}
+              />
+            ))}
+          </ScrollDiv>
           <ButtonContainer>
             <Button onClick={selectAll}>Select All</Button>
             <Button onClick={clearAll}>Clear</Button>
@@ -176,4 +178,20 @@ const Button = styled.button`
   }
 `
 
+const ScrollDiv = styled.div`
+  max-height: 400px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  box-sizing: border-box;
+
+  // white scrollbar
+  &::-webkit-scrollbar {
+    width: 10px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: white;
+  }
+`
+
 export default Dropdown

src/containers/Explore/ExploreContainer.tsx

@@ -3,7 +3,7 @@ import { OperatorGrid } from '@/components/Explore/OperatorGrid'
 import { defaultFilterState } from '@/states/filterState'
 import styled from '@emotion/styled'
 import { hookstate, useHookstate } from '@hookstate/core'
-import React from 'react'
+import React, { useMemo } from 'react'
 import useGetOperators from '../../../apis/operators/useGetOperators'
 import {
   ARCHETYPE,
@@ -17,7 +17,9 @@ import { processOperators, shuffleOperators } from '../../../utils/operators'
 
 interface ExploreSectionProps {}
 
-const globalState = hookstate(defaultFilterState)
+const globalState = hookstate(() =>
+  JSON.parse(JSON.stringify(defaultFilterState)),
+)
 
 const ExploreSection: React.FC<ExploreSectionProps> = () => {
   const { data, isLoading } = useGetOperators()
@@ -30,21 +32,14 @@ const ExploreSection: React.FC<ExploreSectionProps> = () => {
     filter.archetype.slice(),
   )
 
-  const selectedOperators = processedOperators?.filter((operator) => {
+  const selectedOperators = useMemo(() => {
-    // filter by comp, skin, helmet, jacket, background
+    const filterCopied = JSON.parse(JSON.stringify(filter))
-    return (
+
-      (filter.comp.length === 0 ||
+    return processedOperators
-        filter.comp.includes(operator.comp as string)) &&
+      ?.filter((op) => filterCopied.comp.includes(op.comp))
-      (filter.skin.length === 0 ||
+      ?.filter((op) => filterCopied.skin.includes(op.skin))
-        filter.skin.includes(operator.skin as string)) &&
+      ?.filter((op) => filterCopied.background.includes(op.background))
-      (filter.helmet.length === 0 ||
+  }, [processedOperators, filter])
-        filter.helmet.includes(operator.helmet as string)) &&
-      (filter.jacket.length === 0 ||
-        filter.jacket.includes(operator.jacket as string)) &&
-      (filter.background.length === 0 ||
-        filter.background.includes(operator.background as string))
-    )
-  })
 
   const randomizedOperators = shuffleOperators(selectedOperators)
 
@@ -52,7 +47,8 @@ const ExploreSection: React.FC<ExploreSectionProps> = () => {
     selectedOptions: string[],
     filterType: string,
   ) => {
-    ;(state[filterType as keyof typeof filter] as any).set(selectedOptions)
+    // @ts-ignore
+    state[filterType].set(selectedOptions)
   }
 
   return (

utils/operators.ts

@@ -78,3 +78,23 @@ export function shuffleOperators(
   }
   return array
 }
+
+export function extractUniqueValues(data: any, field: string) {
+  if (!data || !field) {
+    return []
+  }
+  const uniqueValues = new Set()
+
+  function traverse(item: any) {
+    if (item[field]) {
+      uniqueValues.add(item[field])
+    }
+    if (item.operators && Array.isArray(item.operators)) {
+      item.operators?.forEach(traverse)
+    }
+  }
+
+  data.forEach(traverse)
+
+  return Array.from(uniqueValues)
+}