diff --git a/public/assets/check-button.svg b/public/assets/check-button.svg
new file mode 100644
index 0000000..b4fa313
--- /dev/null
+++ b/public/assets/check-button.svg
@@ -0,0 +1,5 @@
+
+
\ No newline at end of file
diff --git a/public/assets/check.svg b/public/assets/check.svg
new file mode 100644
index 0000000..e4edc3a
--- /dev/null
+++ b/public/assets/check.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/components/Dropdown/Checkbox.tsx b/src/components/Dropdown/Checkbox.tsx
index 7ddc7b0..a92e869 100644
--- a/src/components/Dropdown/Checkbox.tsx
+++ b/src/components/Dropdown/Checkbox.tsx
@@ -13,7 +13,9 @@ const Checkbox: React.FC = ({
}) => (
-
+
+ {checked && }
+
{label}
)
@@ -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`
diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx
index dfe7af1..992bbd8 100644
--- a/src/components/Dropdown/Dropdown.tsx
+++ b/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 = ({
@@ -14,11 +15,20 @@ const Dropdown: React.FC = ({
options,
filterType,
onSelectionChange,
+ prefill = [],
}) => {
const [selectedOptions, setSelectedOptions] = useState([])
const [isExpanded, setIsExpanded] = useState(false)
+
const dropdownRef = useRef(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)) {
diff --git a/src/containers/Explore/ExploreContainer.tsx b/src/containers/Explore/ExploreContainer.tsx
index f607f56..5a0f76f 100644
--- a/src/containers/Explore/ExploreContainer.tsx
+++ b/src/containers/Explore/ExploreContainer.tsx
@@ -74,6 +74,7 @@ const ExploreSection: React.FC = () => {
options={ARCHETYPE}
onSelectionChange={handleFilterChange}
filterType="archetype"
+ prefill={ARCHETYPE}
/>