56 lines
2.6 KiB
TypeScript
56 lines
2.6 KiB
TypeScript
import { useRosettaColors } from "@/app/hooks/useRosettaColors";
|
|
import { Popover, Text } from "@mantine/core";
|
|
import { useDisclosure } from "@mantine/hooks";
|
|
import { IconArrowBadgeDownFilled, IconRosetteDiscountCheckFilled, IconShieldCheckFilled } from "@tabler/icons-react";
|
|
|
|
interface VerifiedBadgeProps {
|
|
verified: number;
|
|
size?: number;
|
|
hideTooltip?: boolean;
|
|
color?: string;
|
|
}
|
|
|
|
export function VerifiedBadge(props : VerifiedBadgeProps) {
|
|
const colors = useRosettaColors();
|
|
const [opened, { close, open }] = useDisclosure(false);
|
|
return (
|
|
<>
|
|
{props.verified == 1 && <>
|
|
<Popover width={200} opened={!props.hideTooltip && opened} position="bottom" withArrow arrowOffset={18}>
|
|
<Popover.Target>
|
|
<IconRosetteDiscountCheckFilled onMouseEnter={open} onMouseLeave={close} size={props.size || 21} color={props.color ? props.color : colors.brandColor}></IconRosetteDiscountCheckFilled>
|
|
</Popover.Target>
|
|
<Popover.Dropdown>
|
|
<Text size="xs" c={'dimmed'}>
|
|
This is an official account belonging to a public figure, brand, or organization.
|
|
</Text>
|
|
</Popover.Dropdown>
|
|
</Popover>
|
|
</>}
|
|
{props.verified == 2 && <>
|
|
<Popover width={200} opened={!props.hideTooltip && opened} position="bottom" withArrow arrowOffset={18}>
|
|
<Popover.Target>
|
|
<IconShieldCheckFilled onMouseEnter={open} onMouseLeave={close} size={props.size || 21} color={props.color ? props.color : colors.success}></IconShieldCheckFilled>
|
|
</Popover.Target>
|
|
<Popover.Dropdown>
|
|
<Text size="xs" c={'dimmed'}>
|
|
This is official account belonging to administration of Rosetta.
|
|
</Text>
|
|
</Popover.Dropdown>
|
|
</Popover>
|
|
</>}
|
|
{props.verified == 3 && <>
|
|
<Popover width={200} opened={!props.hideTooltip && opened} withArrow>
|
|
<Popover.Target>
|
|
<IconArrowBadgeDownFilled onMouseEnter={open} onMouseLeave={close} size={props.size || 21} color={props.color ? props.color : colors.brandColor}></IconArrowBadgeDownFilled>
|
|
</Popover.Target>
|
|
<Popover.Dropdown>
|
|
<Text size="xs" c={'dimmed'}>
|
|
This user is administrator of this group.
|
|
</Text>
|
|
</Popover.Dropdown>
|
|
</Popover>
|
|
</>}
|
|
</>
|
|
)
|
|
} |