Updated WoL Settings

src/pages/settings/components/Applications/AppSettingsItem.tsx

@@ -0,0 +1,74 @@
+import { Icon } from '@iconify/react';
+import { Box, Stack, Text } from '@mantine/core';
+import { useCommonHooks } from 'hooks';
+import { useState } from 'react';
+import { boxClasses, textClasses } from 'styles';
+
+function AppSettingsItem({ url, icon, name }: any) {
+	const [textDecoration, setTextDecoration] = useState<string>('none');
+	const [hover, setHover] = useState<boolean>(false);
+	const { isMobile } = useCommonHooks();
+	return (
+		<Box
+			onMouseOver={() => {
+				setTextDecoration('underline');
+				setHover(true);
+			}}
+			onMouseOut={() => {
+				setTextDecoration('none');
+				setHover(false);
+			}}
+			className={boxClasses.appItemBox}
+		>
+			{hover && (
+				<svg
+					style={{ position: 'absolute', borderRadius: '6px' }}
+					height='100%'
+					width='100%'
+					xmlns='http://www.w3.org/2000/svg'
+				>
+					<rect rx='16' ry='16' height='100%' width='100%' strokeLinejoin='round' />
+				</svg>
+			)}
+			<Stack
+				align={isMobile ? 'center' : undefined}
+				justify={isMobile ? 'center' : undefined}
+				style={{
+					height: '128px',
+					width: isMobile ? '100%' : undefined,
+					marginRight: isMobile ? '0' : '1em',
+					marginLeft: isMobile ? '0' : '2em',
+					paddingTop: isMobile ? '0' : '32px',
+				}}
+			>
+				<Icon icon={`mdi:${icon}`} height={64} width={64} />
+			</Stack>
+			<Stack
+				style={{
+					display: 'flex',
+					flexDirection: 'column',
+					justifyContent: 'center',
+					flex: 1,
+					overflow: 'hidden',
+					gap: 0,
+				}}
+			>
+				<Text fz={22} className={textClasses.appName} classNames={textClasses}>
+					{name}
+				</Text>
+				<Text
+					fz={16}
+					className={textClasses.appUrl}
+					classNames={textClasses}
+					style={{
+						textDecoration: textDecoration,
+					}}
+				>
+					{url}
+				</Text>
+			</Stack>
+		</Box>
+	);
+}
+
+export default AppSettingsItem;