53 lines
1.1 KiB
TypeScript
53 lines
1.1 KiB
TypeScript
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;
|