feat: support dropdown prefill

public/assets/check-button.svg

@@ -0,0 +1,5 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="white"
+    xmlns="http://www.w3.org/2000/svg">
+    <path d="M12.9813 16.5L10.6112 14.1299L11.2038 13.5374L12.9813 15.315L16.7963 11.5L17.3888 12.0925L12.9813 16.5Z" fill="black"/>
+</svg>
+    

public/assets/check.svg

@@ -0,0 +1,3 @@
+<svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.9813 5.5L0.611237 3.12994L1.20375 2.53742L2.9813 4.31497L6.79627 0.5L7.38878 1.09252L2.9813 5.5Z" fill="black"/>
+</svg>

src/components/Dropdown/Checkbox.tsx

@@ -13,7 +13,9 @@ const Checkbox: React.FC<CustomCheckboxProps> = ({
 }) => (
   <Container>
     <HiddenCheckbox type="checkbox" checked={checked} onChange={onChange} />
-    <StyledCheckbox isChecked={checked} />
+    <StyledCheckbox isChecked={checked}>
+      {checked && <img src="/assets/check.svg" alt="checkmark" />}
+    </StyledCheckbox>
     <LabelText>{label}</LabelText>
   </Container>
 )
@@ -39,22 +41,15 @@ const HiddenCheckbox = styled.input`
 `
 
 const StyledCheckbox = styled.span<{ isChecked: boolean }>`
-  display: inline-block;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid white;
   width: 18px;
   height: 18px;
   background-color: ${({ isChecked }) => (isChecked ? 'white' : 'black')};
-  border: 1px solid white;
   position: relative;
   margin-right: 10px;
-
-  &::after {
-    content: ${({ isChecked }) => (isChecked ? "'✓'" : "''")};
-    color: black;
-    position: absolute;
-    top: -2px;
-    left: 2px;
-    font-size: 14px;
-  }
 `
 
 const LabelText = styled.span`

src/components/Dropdown/Dropdown.tsx

@@ -7,6 +7,7 @@ interface DropdownProps {
   options: string[]
   filterType: string
   onSelectionChange: (selectedOptions: string[], filterType: string) => void
+  prefill?: string[]
 }
 
 const Dropdown: React.FC<DropdownProps> = ({
@@ -14,11 +15,20 @@ const Dropdown: React.FC<DropdownProps> = ({
   options,
   filterType,
   onSelectionChange,
+  prefill = [],
 }) => {
   const [selectedOptions, setSelectedOptions] = useState<string[]>([])
   const [isExpanded, setIsExpanded] = useState(false)
+
   const dropdownRef = useRef<HTMLDivElement>(null)
 
+  // If prefill is provided, set the selected options to the prefill
+  useEffect(() => {
+    if (prefill?.length) {
+      setSelectedOptions(prefill)
+    }
+  }, [prefill])
+
   const handleSelect = (option: string) => {
     let newSelectedOptions = []
     if (selectedOptions.includes(option)) {

src/containers/Explore/ExploreContainer.tsx

@@ -74,6 +74,7 @@ const ExploreSection: React.FC<ExploreSectionProps> = () => {
           options={ARCHETYPE}
           onSelectionChange={handleFilterChange}
           filterType="archetype"
+          prefill={ARCHETYPE}
         />
         <Dropdown
           title="Comp"