81 lines
2.0 KiB
TypeScript
81 lines
2.0 KiB
TypeScript
import { Box, Stack, Text } from '@mantine/core';
|
|
import { useCommonHooks } from 'hooks';
|
|
import { useState } from 'react';
|
|
import * as fa6 from 'react-icons/fa6';
|
|
import * as si from 'react-icons/si';
|
|
import * as vsc from 'react-icons/vsc';
|
|
import { boxClasses, textClasses } from 'styles';
|
|
|
|
function AppItem({ url, icon, name }: { url: string; icon: string; name: string }) {
|
|
const allIcons: any = { ...fa6, ...vsc, ...si };
|
|
const Icon = allIcons[icon];
|
|
const { isMobile } = useCommonHooks();
|
|
const [textDecoration, setTextDecoration] = useState<string>('none');
|
|
const [hover, setHover] = useState<boolean>(false);
|
|
const validUrl =
|
|
url.startsWith('http://') || url.startsWith('https://') ? url : `http://${url}`;
|
|
return (
|
|
<Box
|
|
component='a'
|
|
href={validUrl}
|
|
onMouseOver={() => {
|
|
setTextDecoration('underline');
|
|
setHover(true);
|
|
}}
|
|
onMouseOut={() => {
|
|
setTextDecoration('none');
|
|
setHover(false);
|
|
}}
|
|
className={boxClasses.appItemBox}
|
|
h={'64px'}
|
|
>
|
|
{hover && (
|
|
<svg
|
|
style={{ position: 'absolute', borderRadius: '6px' }}
|
|
height='100%'
|
|
width='100%'
|
|
xmlns='http://www.w3.org/2000/svg'
|
|
>
|
|
<rect rx='8' ry='8' height='100%' width='100%' strokeLinejoin='round' />
|
|
</svg>
|
|
)}
|
|
<Stack
|
|
align={isMobile ? 'center' : undefined}
|
|
justify={isMobile ? 'center' : undefined}
|
|
style={{
|
|
width: isMobile ? '100%' : undefined,
|
|
marginRight: isMobile ? 0 : '1rem',
|
|
marginLeft: isMobile ? 0 : '1rem',
|
|
paddingTop: isMobile ? 0 : '1rem',
|
|
}}
|
|
>
|
|
{Icon && <Icon style={{ height: '2rem', width: '2rem' }} />}
|
|
</Stack>
|
|
<Stack
|
|
justify='center'
|
|
style={{
|
|
overflow: 'hidden',
|
|
whiteSpace: 'nowrap',
|
|
gap: 0,
|
|
flex: 1,
|
|
}}
|
|
>
|
|
<Text className={textClasses.appName} classNames={textClasses}>
|
|
{name}
|
|
</Text>
|
|
<Text
|
|
className={textClasses.appUrl}
|
|
classNames={textClasses}
|
|
style={{
|
|
textDecoration: textDecoration,
|
|
}}
|
|
>
|
|
{url}
|
|
</Text>
|
|
</Stack>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
export default AppItem;
|