44 lines
1.4 KiB
TypeScript
44 lines
1.4 KiB
TypeScript
import { Box } from "@mantine/core";
|
|
import { IconX } from "@tabler/icons-react";
|
|
import { DialogAttachmentProps } from "./DialogAttachment";
|
|
import { useRosettaColors } from "@/app/hooks/useRosettaColors";
|
|
|
|
|
|
export function AttachImage (props : DialogAttachmentProps) {
|
|
const colors = useRosettaColors();
|
|
return (
|
|
<Box style={{
|
|
maxWidth: 100,
|
|
maxHeight: 70,
|
|
position: 'relative'
|
|
}}
|
|
key={props.attach.id}>
|
|
<img style={{
|
|
maxWidth: 100,
|
|
maxHeight: 70,
|
|
borderRadius: 8,
|
|
userSelect: 'none'
|
|
}} src={props.attach.blob}>
|
|
</img>
|
|
{props.onRemove &&
|
|
<Box bg={colors.error} 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>
|
|
);
|
|
} |