60 lines
2.3 KiB
TypeScript
60 lines
2.3 KiB
TypeScript
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>
|
|
);
|
|
} |