Working empty version

src/pages/homepage/components/SettingsButton.tsx

@@ -1,4 +1,4 @@
-import { Button, Menu, NavLink, Select } from '@mantine/core';
+import { Button, Menu, MultiSelect, NavLink } from '@mantine/core';
 import { useEffect, useState } from 'react';
 import { FiMenu, FiMonitor } from 'react-icons/fi';
 import { useQueryAPI } from '../../../hooks/useAPI';
@@ -7,7 +7,13 @@ import menu from '../../../styles/Menu.module.css';
 import navLink from '../../../styles/NavLink.module.css';
 import selectClasses from '../../../styles/Select.module.css';
 
-function SettingsButton({ contentType, setContentType, theme }: any) {
+function SettingsButton({
+	appFilter,
+	setAppFilter,
+	bookmarkFilter,
+	setBookmarkFilter,
+	theme,
+}: any) {
 	const { data, isFetched } = useQueryAPI({ endpoint: 'api/appCategories' });
 	const [categories, setCategories] = useState([{ value: 'All', label: 'All' }]);
 
@@ -15,7 +21,7 @@ function SettingsButton({ contentType, setContentType, theme }: any) {
 		if (data) {
 			const list: [any] =
 				data.map((category: any) => {
-					return { value: category.category, label: category.category };
+					return { value: category.filterName, label: category.filterName };
 				}) || [];
 			list.unshift({ value: 'All', label: 'All' });
 			setCategories(list);
@@ -57,13 +63,24 @@ function SettingsButton({ contentType, setContentType, theme }: any) {
 						classNames={navLink}
 					/>
 				</NavLink>
-				<Select
-					label='Homepage Filter'
+				<MultiSelect
+					label='App Filter'
 					data={categories ?? []}
-					defaultValue={contentType}
+					defaultValue={appFilter}
 					withCheckIcon={false}
 					onChange={(data: any) => {
-						setContentType(data);
+						setAppFilter(data);
+					}}
+					classNames={selectClasses}
+					comboboxProps={{ withinPortal: false }}
+				/>
+				<MultiSelect
+					label='Bookmark Filter'
+					data={categories ?? []}
+					defaultValue={bookmarkFilter}
+					withCheckIcon={false}
+					onChange={(data: any) => {
+						setBookmarkFilter(data);
 					}}
 					classNames={selectClasses}
 					comboboxProps={{ withinPortal: false }}