'init'

app/components/DialogAttachment/AttachAvatar.tsx

@@ -0,0 +1,60 @@
+import { Box, Flex, Paper, Text } from "@mantine/core";
+import { IconLock, IconX } from "@tabler/icons-react";
+import { DialogAttachmentProps } from "./DialogAttachment";
+import { useRosettaColors } from "@/app/hooks/useRosettaColors";
+import { useDialog } from "@/app/providers/DialogProvider/useDialog";
+import { useGroups } from "@/app/providers/DialogProvider/useGroups";
+
+
+export function AttachAvatar (props : DialogAttachmentProps) {
+    const colors = useRosettaColors();
+    const {dialog} = useDialog();
+    const {hasGroup} = useGroups();
+
+    return (
+        <Paper withBorder p={'sm'} style={{
+            width: '100%',
+            position: 'relative'
+        }}
+         key={props.attach.id}>
+            <Flex gap={'xs'}>
+                <img style={{
+                    width: 60,
+                    height: 60,
+                    borderRadius: '50%',
+                    userSelect: 'none'
+                }} src={props.attach.blob}>
+                </img>
+                <Flex direction={"column"} justify={"center"}>
+                    <Flex direction={"row"} align={"center"} gap={5}>
+                        <Text fw={500} fz={'sm'}>{hasGroup(dialog) ? 'Group' : 'Your'} avatar</Text>
+                        <IconLock size={14} stroke={2} color={colors.success}></IconLock>
+                    </Flex>
+                    <Text fz={'xs'} c={'dimmed'}>
+                        This avatar will be visible {hasGroup(dialog) ? 'to the group' : 'to your opponent'}.
+                        All avatars are end-to-end encrypted.
+                    </Text>
+                </Flex>
+            </Flex>
+            {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>
+            }
+        </Paper>        
+    );
+}