Added Homepage components

src/pages/homepage/components/Bookmarks.tsx

@@ -0,0 +1,62 @@
+import { Stack, Text } from '@mantine/core';
+import { useEffect, useState } from 'react';
+import {useQueryAPI} from '../../../hooks/useAPI';
+import texts from '../../../styles/Text.module.css';
+import LinkGroups from './LinkGroups';
+
+function Links() {
+	const { data: linkData, isFetched: linksIsFetched } = useQueryAPI({
+		endpoint: 'api/links',
+	});
+	const { data: groupData, isFetched: groupsIsFetched } = useQueryAPI({
+		endpoint: 'api/categories',
+	});
+	const [bookmarks, setBookmarks] = useState([]);
+	const [categories, setCategories] = useState([]);
+
+	useEffect(() => {
+		if (linksIsFetched && groupsIsFetched) {
+			setBookmarks(linkData);
+			setCategories(groupData);
+		}
+	}, [linksIsFetched, groupsIsFetched]);
+
+	return (
+		<>
+			{groupsIsFetched && linksIsFetched && categories?.length > 0 && (
+				<Stack id='links' style={{ gap: 0 }}>
+					<Text className={texts.sectionTitle}>Bookmarks</Text>
+					<Stack
+						style={{
+							display: 'grid',
+							flexWrap: 'nowrap',
+							gridColumnGap: '20px',
+							gridRowGap: '0px',
+							gridTemplateColumns: '1fr 1fr 1fr 1fr 1fr',
+							gridTemplateRows: 'auto',
+						}}
+					>
+						{categories.map((category: any) => {
+							if (
+								category.column_filter === localStorage.getItem('contenttype') ||
+								localStorage.getItem('contenttype') === 'All'
+							) {
+								return (
+									<LinkGroups
+										key={category.id}
+										category={category.category_name}
+										links={bookmarks.filter(
+											(bookmark: any) => bookmark.category === category.category_index,
+										)}
+									/>
+								);
+							}
+						})}
+					</Stack>
+				</Stack>
+			)}
+		</>
+	);
+}
+
+export default Links;