85 lines
3.2 KiB
TypeScript
85 lines
3.2 KiB
TypeScript
import { Box, Flex, Text } from "@mantine/core";
|
|
import { DialogAttachmentProps } from "./DialogAttachment";
|
|
import { useRosettaColors } from "@/app/hooks/useRosettaColors";
|
|
import { IconFile, IconFileTypeJpg, IconFileTypeJs, IconFileTypePng, IconFileTypeZip, IconX } from "@tabler/icons-react";
|
|
import { dotCenterIfNeeded, humanFilesize } from "@/app/utils/utils";
|
|
|
|
export function AttachFile(props : DialogAttachmentProps) {
|
|
const colors = useRosettaColors();
|
|
const filesize = parseInt(props.attach.preview.split("::")[0]);
|
|
const filename = props.attach.preview.split("::")[1];
|
|
const filetype = filename.split(".")[filename.split(".").length - 1];
|
|
|
|
const getIconByFiletype = (type : string) : React.ReactNode => {
|
|
type = type.trim().toLocaleLowerCase();
|
|
const iconAttributes = {
|
|
size: 23,
|
|
color: colors.chevrons.active
|
|
}
|
|
switch(type){
|
|
case 'js':
|
|
return <IconFileTypeJs {...iconAttributes}></IconFileTypeJs>
|
|
case 'jpeg':
|
|
return <IconFileTypeJpg {...iconAttributes}></IconFileTypeJpg>
|
|
case 'jpg':
|
|
return <IconFileTypeJpg {...iconAttributes}></IconFileTypeJpg>
|
|
case 'png':
|
|
return <IconFileTypePng {...iconAttributes}></IconFileTypePng>
|
|
case 'zip':
|
|
return <IconFileTypeZip {...iconAttributes}></IconFileTypeZip>
|
|
case '7z':
|
|
return <IconFileTypeZip {...iconAttributes}></IconFileTypeZip>
|
|
default:
|
|
return <IconFile {...iconAttributes}></IconFile>
|
|
}
|
|
}
|
|
|
|
const icon = getIconByFiletype(filetype);
|
|
|
|
return (
|
|
<Box style={{
|
|
minWidth: 100,
|
|
minHeight: 70,
|
|
position: 'relative',
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
border: '1px solid ' + colors.borderColor,
|
|
borderRadius: 8,
|
|
backgroundColor: colors.boxColor,
|
|
flexDirection: 'row',
|
|
gap: 4
|
|
}}
|
|
key={props.attach.id}>
|
|
{icon}
|
|
<Flex direction={'column'} gap={4}>
|
|
<Text size={'xs'} c={colors.chevrons.active}>
|
|
{dotCenterIfNeeded(filename, 10)}
|
|
</Text>
|
|
<Text size={'xs'} c={colors.chevrons.active}>
|
|
{humanFilesize(filesize)}
|
|
</Text>
|
|
</Flex>
|
|
|
|
{props.onRemove &&
|
|
<Box bg={colors.brandColor} style={{
|
|
position: 'absolute',
|
|
top: -5,
|
|
right: -5,
|
|
borderRadius: '50%',
|
|
cursor: 'pointer',
|
|
height: 18,
|
|
width: 18,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
}}
|
|
onClick={() => {
|
|
props.onRemove && props.onRemove(props.attach);
|
|
}}>
|
|
<IconX size={13} stroke={2} color="white"></IconX>
|
|
</Box>
|
|
}
|
|
</Box>
|
|
);
|
|
} |