Added Homepage components

src/pages/homepage/components/SettingsButton.tsx

@@ -0,0 +1,97 @@
+import { Button, Menu, NavLink, Select, Stack } from '@mantine/core';
+import { useEffect, useState } from 'react';
+import { FiMenu, FiMonitor } from 'react-icons/fi';
+import {useQueryAPI} from '../../../hooks/useAPI';
+import button from '../../../styles/Button.module.css';
+import menu from '../../../styles/Menu.module.css';
+import navLink from '../../../styles/NavLink.module.css';
+import selectClasses from '../../../styles/Select.module.css';
+import { useAtom } from 'jotai';
+import { HomepageFilters } from '../../../contexts/HomepageFilters';
+
+function SettingsButton() {
+	const { data, isFetched } = useQueryAPI({ endpoint: 'api/appCategories' });
+	const [categories, setCategories] = useState([{value: 'All', label: 'All'}]);
+	const [homepageFilter, setHomepageFilter] = useAtom<object>(HomepageFilters);
+	const classNames = {
+		root: navLink.root,
+		body: navLink.body,
+		section: navLink.section,
+		label: navLink.label,
+		description: navLink.description,
+		chevron: navLink.chevron,
+	};
+	
+	useEffect(() => {
+		if(data) {
+			setCategories(data.map((category: any) => {return {value: category.category, label: category.category}}));
+		}
+	}, [data, isFetched]);
+
+	function runWakeCommand() {
+		const requestOptions = {
+			method: 'GET',
+			headers: { 'Content-Type': 'application/json' },
+		};
+		fetch('/trigger/api/wakeDakota', requestOptions);
+	}
+	return (
+		<Menu
+			withinPortal
+			withArrow
+			shadow='md'
+			position='top'
+			classNames={menu}
+			styles={{
+				dropdown: {
+					backgroundColor: 'var(--color-background)',
+				},
+			}}
+		>
+			<Menu.Target>
+				<Button className={button.settingsButton}>
+					<FiMenu />
+				</Button>
+			</Menu.Target>
+			<Menu.Dropdown
+				style={{
+					position: 'absolute',
+				}}
+			>
+				<NavLink
+					label='Settings'
+					component='a'
+					href='/trigger/settings'
+					classNames={classNames}
+				/>
+				<NavLink label='Quick Actions' classNames={classNames}>
+					<NavLink
+						label='Wake Dakota'
+						leftSection={<FiMonitor />}
+						onClick={() => runWakeCommand()}
+						classNames={classNames}
+					/>
+				</NavLink>
+				<Select
+					label='Homepage Filter'
+					data={categories ?? []}
+					defaultValue={localStorage.getItem('contenttype')}
+					withCheckIcon={false}
+					onChange={(data: any) => {
+						localStorage.setItem('contenttype', data || 'All');
+						setHomepageFilter({value: data, label: data});
+					}}
+					className={selectClasses.filterSelect}
+					classNames={selectClasses}
+					styles={{
+						label: {
+							color: 'var(--color-text-pri)',
+						},
+					}}
+				/>
+			</Menu.Dropdown>
+		</Menu>
+	);
+}
+
+export default SettingsButton;