'init'

app/components/DialogAttachment/AttachImage.tsx

@@ -0,0 +1,44 @@
+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>        
+    );
+}