31 lines
1.5 KiB
TypeScript
31 lines
1.5 KiB
TypeScript
import { PacketSearchUser } from "@/app/providers/ProtocolProvider/protocol/packets/packet.search";
|
|
import { Avatar, Flex, Text } from "@mantine/core";
|
|
import classes from './SearchRow.module.css'
|
|
import { VerifiedBadge } from "../VerifiedBadge/VerifiedBadge";
|
|
import { useAvatars } from "@/app/providers/AvatarProvider/useAvatars";
|
|
|
|
interface SearchRowProps {
|
|
user: PacketSearchUser;
|
|
onDialogClick: (publicKey: string) => void;
|
|
}
|
|
|
|
export function SearchRow(props: SearchRowProps) {
|
|
const avatars = useAvatars(props.user.publicKey, false);
|
|
return (
|
|
<Flex onContextMenu={() => props.onDialogClick(props.user.publicKey)} onClick={() => props.onDialogClick(props.user.publicKey)} className={classes.search_item} p={'sm'} direction={'row'} gap={'sm'}>
|
|
<Avatar
|
|
size={'md'}
|
|
color={'initials'}
|
|
name={props.user.title || props.user.publicKey}
|
|
src={avatars.length > 0 ? avatars[0].avatar : undefined}
|
|
></Avatar>
|
|
<Flex direction={'column'}>
|
|
<Flex gap={3} align={'center'}>
|
|
<Text fz={12}>{props.user.title || props.user.publicKey.slice(0, 10)}</Text>
|
|
{props.user.verified > 0 && <VerifiedBadge hideTooltip size={15} verified={props.user.verified}></VerifiedBadge>}
|
|
</Flex>
|
|
<Text fz={10} c="dimmed">@{props.user.username || props.user.publicKey.slice(0, 10) + "..."}</Text>
|
|
</Flex>
|
|
</Flex>
|
|
)
|
|
} |