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;