42 lines
1.5 KiB
JavaScript
42 lines
1.5 KiB
JavaScript
import "./ProfileImage.css";
|
|
import Nostrich from "../nostrich.jpg";
|
|
|
|
import { useMemo } from "react";
|
|
import { Link, useNavigate } from "react-router-dom";
|
|
import useProfile from "../feed/ProfileFeed";
|
|
import { hexToBech32, profileLink } from "../Util";
|
|
import LazyImage from "./LazyImage";
|
|
import Nip05 from "./Nip05";
|
|
|
|
export default function ProfileImage({ pubkey, subHeader, showUsername = true, className, link }) {
|
|
const navigate = useNavigate();
|
|
const user = useProfile(pubkey);
|
|
|
|
const hasImage = (user?.picture?.length ?? 0) > 0;
|
|
const name = useMemo(() => {
|
|
let name = hexToBech32("npub", pubkey).substring(0, 12);
|
|
if (user?.display_name?.length > 0) {
|
|
name = user.display_name;
|
|
} else if (user?.name?.length > 0) {
|
|
name = user.name;
|
|
}
|
|
return name;
|
|
}, [user]);
|
|
|
|
return (
|
|
<div className={`pfp ${className}`}>
|
|
<LazyImage src={hasImage ? user.picture : Nostrich} onClick={() => navigate(link ?? profileLink(pubkey))} />
|
|
{showUsername && (<div className="f-grow">
|
|
<Link key={pubkey} to={link ?? profileLink(pubkey)}>
|
|
<div className="profile-name">
|
|
<div>{name}</div>
|
|
{user?.nip05 && <Nip05 nip05={user.nip05} pubkey={user.pubkey} />}
|
|
</div>
|
|
</Link>
|
|
{subHeader ? <>{subHeader}</> : null}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|