Refactor

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

@@ -0,0 +1,57 @@
+import { Icon } from '@iconify/react';
+import { Box, Stack, Text } from '@mantine/core';
+import { useState } from 'react';
+import { stackClasses, textClasses } from 'styles';
+
+function AppItem({ url, icon, name, isMobile }: any) {
+	const [textDecoration, setTextDecoration] = useState<string>('none');
+
+	return (
+		<Box
+			component='a'
+			href={`https://${url}`}
+			onMouseOver={() => setTextDecoration('underline')}
+			onMouseOut={() => setTextDecoration('none')}
+			className={stackClasses.appItemBox}
+		>
+			<Stack
+				align={isMobile && 'center'}
+				justify={isMobile && 'center'}
+				style={{
+					height: '64px',
+					width: isMobile && '100%',
+					marginRight: isMobile ? '0' : '1em',
+					marginLeft: isMobile ? '0' : '1em',
+					paddingTop: isMobile ? '0' : '15px',
+				}}
+			>
+				<Icon icon={`mdi:${icon}`} height={32} width={32} />
+			</Stack>
+			<Stack
+				style={{
+					display: 'flex',
+					flexDirection: 'column',
+					justifyContent: 'center',
+					flex: 1,
+					overflow: 'hidden',
+					gap: 0,
+				}}
+			>
+				<Text className={textClasses.appName} classNames={textClasses}>
+					{name}
+				</Text>
+				<Text
+					className={textClasses.appUrl}
+					classNames={textClasses}
+					style={{
+						textDecoration: textDecoration,
+					}}
+				>
+					{url}
+				</Text>
+			</Stack>
+		</Box>
+	);
+}
+
+export default AppItem;

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;