70 lines
3.0 KiB
TypeScript
70 lines
3.0 KiB
TypeScript
import { useRosettaColors } from "@/app/hooks/useRosettaColors";
|
|
import { useAvatars } from "@/app/providers/AvatarProvider/useAvatars";
|
|
import { useUserInformation } from "@/app/providers/InformationProvider/useUserInformation";
|
|
import { Avatar, Flex, MantineColor, Text } from "@mantine/core";
|
|
import { VerifiedBadge } from "../VerifiedBadge/VerifiedBadge";
|
|
import { OnlineState } from "@/app/providers/ProtocolProvider/protocol/packets/packet.onlinestate";
|
|
import { UserInformation } from "@/app/providers/InformationProvider/InformationProvider";
|
|
|
|
export enum AdditionalType {
|
|
ONLINE,
|
|
USERNAME
|
|
}
|
|
|
|
export interface UserRowProps {
|
|
publicKey: string;
|
|
rightSection?: (publicKey: string) => React.ReactNode;
|
|
onClick?: (userInfo: UserInformation) => void;
|
|
renderCondition?: (userInfo: UserInformation) => boolean;
|
|
additionalType?: AdditionalType;
|
|
bg?: MantineColor;
|
|
}
|
|
|
|
export function UserRow(props: UserRowProps) {
|
|
const [userInfo] = useUserInformation(props.publicKey);
|
|
const avatars = useAvatars(props.publicKey, false);
|
|
const colors = useRosettaColors();
|
|
|
|
if(props.renderCondition && !props.renderCondition(userInfo)) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<Flex justify={'space-between'} bg={props.bg} align={'center'} p={'xs'}
|
|
style={{
|
|
borderBottom: '1px solid var(--rosetta-border-color)',
|
|
cursor: props.onClick ? 'pointer' : 'default'
|
|
}}>
|
|
<Flex align={'center'} direction={'row'} gap={10}>
|
|
<Avatar
|
|
radius="xl"
|
|
name={userInfo.title}
|
|
color={'initials'}
|
|
src={avatars.length > 0 ? avatars[0].avatar : undefined}
|
|
/>
|
|
<Flex direction={'column'}>
|
|
<Flex justify={'row'} align={'center'} gap={3}>
|
|
<Text size="sm" fw={500}>{userInfo.title}</Text>
|
|
<VerifiedBadge size={17} verified={userInfo.verified}></VerifiedBadge>
|
|
</Flex>
|
|
{!props.additionalType && (
|
|
<Text size={'xs'} c={userInfo.online == OnlineState.ONLINE ? colors.success : 'dimmed'}>{userInfo.online == OnlineState.ONLINE ? 'online' : 'offline'}</Text>
|
|
)}
|
|
{props.additionalType === AdditionalType.ONLINE && (
|
|
<Text size={'xs'} c={userInfo.online == OnlineState.ONLINE ? colors.success : 'dimmed'}>{userInfo.online == OnlineState.ONLINE ? 'online' : 'offline'}</Text>
|
|
)}
|
|
{props.additionalType === AdditionalType.USERNAME && (
|
|
<Text size={'xs'} c={'dimmed'}>@{userInfo.username}</Text>
|
|
)}
|
|
</Flex>
|
|
</Flex>
|
|
{props.rightSection && (
|
|
<Flex align={'center'} style={{
|
|
cursor: 'pointer'
|
|
}} gap={'xs'} justify={'center'}>
|
|
{props.rightSection(props.publicKey)}
|
|
</Flex>
|
|
)}
|
|
</Flex>
|
|
);
|
|
} |