Added Homepage components

src/pages/homepage/Homepage.tsx

@@ -0,0 +1,65 @@
+import { Stack } from '@mantine/core';
+import { useEffect, useState } from 'react';
+import stackClasses from '../../styles/Stack.module.css';
+import {useQueryAPI} from '../../hooks/useAPI';
+import Search from './components/Search';
+import Header from './components/Header';
+import Applications from './components/Applications';
+import Bookmarks from './components/Bookmarks';
+import SettingsButton from './components/SettingsButton';
+import { useAtom } from 'jotai';
+import { HomepageFilters } from '../../contexts/HomepageFilters';
+
+
+export default function Homepage() {
+	const { data, isFetching } = useQueryAPI({ endpoint: 'api/messages' });
+	const [displayedGreeting, setDisplayedGreeting] = useState('');
+	const [homepageFilter, setHomepageFilter] = useAtom<any>(HomepageFilters);
+	
+	function date() {
+		const currentDate = new Date();
+		const dateOptions: Intl.DateTimeFormatOptions = {
+			weekday: 'long',
+			year: 'numeric',
+			month: 'long',
+			day: 'numeric',
+		};
+		const date = currentDate.toLocaleDateString('en-GB', dateOptions);
+		return date;
+	}
+
+	function greet(list: any) {
+		const currentTime = new Date();
+		const greet = Math.floor(currentTime.getHours() / 6);
+		const easterEggChance = Math.floor(Math.random() * 100);
+		let timeBased: any = [];
+		let easterEggs: any = [];
+		for (const l of list) {
+			if (l.easteregg === 'N') {
+				timeBased = timeBased.concat(l);
+			} else {
+				easterEggs = easterEggs.concat(l);
+			}
+		}
+		if (easterEggChance > 10 || easterEggs.length === 0) {
+			return timeBased[greet].message;
+		}
+		return easterEggs[Math.floor(Math.random() * easterEggs.length)].message;
+	}
+
+	useEffect(() => {
+		if (data) {
+			setDisplayedGreeting(greet(data));
+		}
+	}, [isFetching]);
+
+	return (
+		<Stack className={stackClasses.containerStack}>
+			<Search />
+			<Header date={date()} greet={displayedGreeting} />
+			<Applications />
+			<Bookmarks />
+			<SettingsButton />
+		</Stack>
+	);
+}