59 lines
1.9 KiB
TypeScript
59 lines
1.9 KiB
TypeScript
import "./ProfileImage.css";
|
|
|
|
import { useMemo } from "react";
|
|
import { Link, useNavigate } from "react-router-dom";
|
|
import { useUserProfile } from "Feed/ProfileFeed";
|
|
import { hexToBech32, profileLink } from "Util";
|
|
import Avatar from "Element/Avatar"
|
|
import Nip05 from "Element/Nip05";
|
|
import { HexKey } from "Nostr";
|
|
import { MetadataCache } from "State/Users";
|
|
|
|
export interface ProfileImageProps {
|
|
pubkey: HexKey,
|
|
subHeader?: JSX.Element,
|
|
showUsername?: boolean,
|
|
className?: string,
|
|
link?: string
|
|
};
|
|
|
|
export default function ProfileImage({ pubkey, subHeader, showUsername = true, className, link }: ProfileImageProps) {
|
|
const navigate = useNavigate();
|
|
const user = useUserProfile(pubkey);
|
|
|
|
const name = useMemo(() => {
|
|
return getDisplayName(user, pubkey);
|
|
}, [user, pubkey]);
|
|
|
|
return (
|
|
<div className={`pfp${className ? ` ${className}` : ""}`}>
|
|
<div className="avatar-wrapper">
|
|
<Avatar user={user} onClick={() => navigate(link ?? profileLink(pubkey))} />
|
|
</div>
|
|
{showUsername && (
|
|
<div className="profile-name f-grow">
|
|
<div className="username">
|
|
<Link className="display-name" key={pubkey} to={link ?? profileLink(pubkey)}>
|
|
{name}
|
|
{user?.nip05 && <Nip05 nip05={user.nip05} pubkey={user.pubkey} />}
|
|
</Link>
|
|
</div>
|
|
<div className="subheader">
|
|
{subHeader}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export function getDisplayName(user: MetadataCache | undefined, pubkey: HexKey) {
|
|
let name = hexToBech32("npub", pubkey).substring(0, 12);
|
|
if ((user?.display_name?.length ?? 0) > 0) {
|
|
name = user!.display_name!;
|
|
} else if ((user?.name?.length ?? 0) > 0) {
|
|
name = user!.name!;
|
|
}
|
|
return name;
|
|
}
|