39 lines
1.7 KiB
TypeScript
39 lines
1.7 KiB
TypeScript
import { Avatar, Flex, Text, useMantineTheme } from "@mantine/core";
|
|
import { useRosettaColors } from "@/app/hooks/useRosettaColors";
|
|
import { useAvatars } from "@/app/providers/AvatarProvider/useAvatars";
|
|
import { Mention } from "./MentionList";
|
|
|
|
interface MentionRowProps extends Mention {
|
|
selected?: boolean;
|
|
}
|
|
|
|
export function MentionRow(props : MentionRowProps) {
|
|
const colors = useRosettaColors();
|
|
const avatars = useAvatars(props.publicKey, false);
|
|
const theme = useMantineTheme();
|
|
|
|
return (
|
|
<Flex align={'center'} bg={props.selected ? theme.colors.blue[8] + "10" : undefined} style={{
|
|
cursor: 'pointer'
|
|
}} gap={'sm'} p={'xs'} direction={'row'}>
|
|
{props.username == 'all' && <Avatar title="@" variant="filled" color={colors.brandColor}>@</Avatar>}
|
|
{props.username == 'admin' && <Avatar title="@" variant="filled" color={colors.error}>@</Avatar>}
|
|
{props.username != 'all' && props.username != 'admin' && <Avatar
|
|
title={props.title}
|
|
variant="filled"
|
|
color="initials"
|
|
src={avatars.length > 0 ? avatars[0].avatar : null}
|
|
></Avatar>}
|
|
<Flex direction={'column'}>
|
|
<Flex justify={'row'} align={'center'} gap={3}>
|
|
<Text size="sm" fw={500}>
|
|
{props.username == 'all' && 'All users'}
|
|
{props.username == 'admin' && 'Administrator'}
|
|
{props.username != 'all' && props.username != 'admin' && props.title}
|
|
</Text>
|
|
</Flex>
|
|
<Text size={'xs'} c={'dimmed'}>@{props.username}</Text>
|
|
</Flex>
|
|
</Flex>
|
|
)
|
|
} |