38 lines
1.5 KiB
TypeScript
38 lines
1.5 KiB
TypeScript
import { AccountBase } from "@/app/providers/AccountProvider/AccountProvider";
|
|
import { useAvatars } from "@/app/providers/AvatarProvider/useAvatars";
|
|
import { useUserCache } from "@/app/providers/InformationProvider/useUserCache";
|
|
import { Avatar, Flex, Text } from "@mantine/core";
|
|
|
|
interface UserAccountSelectProps {
|
|
accountBase: AccountBase;
|
|
selected?: boolean;
|
|
onClick?: () => void;
|
|
}
|
|
|
|
export function UserAccountSelect(props : UserAccountSelectProps) {
|
|
const userInfo = useUserCache(props.accountBase.publicKey) || {
|
|
title: props.accountBase.publicKey
|
|
};
|
|
const avatars = useAvatars(props.accountBase.publicKey);
|
|
|
|
return (
|
|
<Flex w={'100%'} onClick={props.onClick} style={{
|
|
borderRadius: 5,
|
|
cursor: 'pointer'
|
|
}} pl={'xs'} pr={'xs'} pt={10} pb={10} direction={'row'} justify={'space-between'} align={'center'}>
|
|
{userInfo && (
|
|
<Flex direction={'row'} gap={'xs'} align={'center'}>
|
|
<Avatar src={avatars.length > 0 ? avatars[0].avatar : undefined} size={20} color={'initials'} name={userInfo.title}></Avatar>
|
|
<Flex direction={'column'}>
|
|
<Text fw={500} style={{
|
|
textOverflow: 'ellipsis',
|
|
whiteSpace: 'nowrap',
|
|
overflow: 'hidden',
|
|
width: 100,
|
|
}} size="xs">{userInfo.title}</Text>
|
|
</Flex>
|
|
</Flex>
|
|
)}
|
|
</Flex>
|
|
);
|
|
} |