20 lines
784 B
TypeScript
20 lines
784 B
TypeScript
import { useRosettaColors } from "@/app/hooks/useRosettaColors";
|
|
import { Popover, Text } from "@mantine/core";
|
|
import { useDisclosure } from "@mantine/hooks";
|
|
import { IconLock } from "@tabler/icons-react";
|
|
|
|
export function PopoverLockIconAvatar() {
|
|
const [opened, { close, open }] = useDisclosure(false);
|
|
const colors = useRosettaColors();
|
|
|
|
return (
|
|
<Popover opened={opened} withArrow position="top">
|
|
<Popover.Target>
|
|
<IconLock onMouseEnter={open} onMouseLeave={close} size={12} stroke={2} color={colors.success}></IconLock>
|
|
</Popover.Target>
|
|
<Popover.Dropdown>
|
|
<Text size={'xs'} c={'dimmed'}>This avatar is end-to-end encrypted</Text>
|
|
</Popover.Dropdown>
|
|
</Popover>
|
|
)
|
|
} |