105 lines
2.4 KiB
TypeScript
105 lines
2.4 KiB
TypeScript
import { ActionIcon, Box, Stack, Text, Tooltip } from '@mantine/core';
|
|
import { useCommonHooks } from 'hooks';
|
|
import { useState } from 'react';
|
|
import { FiAlertCircle } from 'react-icons/fi';
|
|
import { actionIconClasses, boxClasses, textClasses } from 'styles';
|
|
|
|
function AppSettingsItem({
|
|
url,
|
|
icon,
|
|
name,
|
|
enabled,
|
|
allIcons,
|
|
}: {
|
|
url: string;
|
|
icon: string;
|
|
name: string;
|
|
enabled: number;
|
|
allIcons: any;
|
|
}) {
|
|
const Icon = allIcons[icon];
|
|
const [textDecoration, setTextDecoration] = useState<string>('none');
|
|
const [hover, setHover] = useState<boolean>(false);
|
|
const { isMobile, theme } = useCommonHooks();
|
|
return (
|
|
<Box pos={'relative'}>
|
|
{enabled === 0 && (
|
|
<Tooltip label={<Text c={theme.primaryColor}>This app is disabled</Text>}>
|
|
<ActionIcon
|
|
className={actionIconClasses.settingsTooltip}
|
|
classNames={actionIconClasses}
|
|
pos={'absolute'}
|
|
size={'xl'}
|
|
variant='subtle'
|
|
style={{ zIndex: 1 }}
|
|
>
|
|
<FiAlertCircle color='red' />
|
|
</ActionIcon>
|
|
</Tooltip>
|
|
)}
|
|
<Box
|
|
component='a'
|
|
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 style={{ height: '64px', width: '64px' }} />}
|
|
</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>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
export default AppSettingsItem;
|