Added Homepage components

src/pages/homepage/components/AppItem.tsx

@@ -0,0 +1,52 @@
+import { Icon } from '@iconify/react';
+import { Box, Stack, Text } from '@mantine/core';
+import { useState } from 'react';
+import stacks from '../../../styles/Stack.module.css';
+import texts from '../../../styles/Text.module.css';
+
+function AppItem({ url, icon, name }: any) {
+	const [textDecoration, setTextDecoration] = useState<string>('none');
+
+	return (
+		<Box
+			component='a'
+			href={`https://${url}`}
+			onMouseOver={() => setTextDecoration('underline')}
+			onMouseOut={() => setTextDecoration('none')}
+			className={stacks.appItemBox}
+		>
+			<Stack
+				style={{
+					height: '64px',
+					marginRight: '1em',
+					marginLeft: '1em',
+					paddingTop: '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={texts.appName}>{name}</Text>
+				<Text
+					className={texts.appUrl}
+					style={{
+						textDecoration: textDecoration,
+					}}
+				>
+					{url}
+				</Text>
+			</Stack>
+		</Box>
+	);
+}
+
+export default AppItem;