Refactor

src/pages/homepage/components/Applications/Applications.tsx

@@ -0,0 +1,58 @@
+import { Stack, Text } from '@mantine/core';
+import { useQueryAPI } from 'hooks';
+import { useEffect, useState } from 'react';
+import { textClasses } from 'styles';
+import AppItem from './AppItem';
+
+function Applications({ contentType, isMobile }: any) {
+	const { data, isFetching } = useQueryAPI({ endpoint: 'api/apps' });
+	const [applications, setApplications] = useState([]);
+	useEffect(() => {
+		if (!isFetching) {
+			setApplications(data);
+		}
+	}, [isFetching]);
+	return (
+		<>
+			{applications.length > 0 && contentType.length > 0 && (
+				<Stack id='apps' style={{ gap: 0 }}>
+					<Text className={textClasses.sectionTitle} classNames={textClasses}>
+						Applications
+					</Text>
+					<Stack
+						style={{
+							gap: '.25rem',
+							backgroundSize: 'cover',
+							borderBottom: '0px solid',
+							display: 'grid',
+							gridColumnGap: '5px',
+							gridRowGap: '5px',
+							gridTemplateColumns: isMobile ? '1fr 1fr 1fr' : '1fr 1fr 1fr 1fr 1fr 1fr',
+							gridTemplateRows: '64px',
+							paddingBottom: 'var(--module-spacing)',
+						}}
+					>
+						{applications?.map((application: any) => {
+							if (
+								contentType.includes(application.filterName) ||
+								contentType.includes('All')
+							)
+								return (
+									<AppItem
+										key={application.name}
+										name={application.name}
+										url={application.url}
+										icon={application.icon}
+										category={application.category}
+										isMobile={isMobile}
+									/>
+								);
+						})}
+					</Stack>
+				</Stack>
+			)}
+		</>
+	);
+}
+
+export default Applications;