click to open profile photo on profile page

This commit is contained in:
Martti Malmi 2023-10-05 15:08:25 +03:00
parent 11c32c2745
commit 23b45961aa
2 changed files with 14 additions and 3 deletions

View File

@ -15,9 +15,10 @@ interface AvatarProps {
image?: string; image?: string;
imageOverlay?: ReactNode; imageOverlay?: ReactNode;
icons?: ReactNode; icons?: ReactNode;
className?: string;
} }
const Avatar = ({ pubkey, user, size, onClick, image, imageOverlay, icons }: AvatarProps) => { const Avatar = ({ pubkey, user, size, onClick, image, imageOverlay, icons, className }: AvatarProps) => {
const [url, setUrl] = useState(""); const [url, setUrl] = useState("");
const { proxy } = useImgProxy(); const { proxy } = useImgProxy();
@ -43,7 +44,7 @@ const Avatar = ({ pubkey, user, size, onClick, image, imageOverlay, icons }: Ava
<div <div
onClick={onClick} onClick={onClick}
style={style} style={style}
className={`avatar${imageOverlay ? " with-overlay" : ""}`} className={`avatar${imageOverlay ? " with-overlay" : ""} ${className ?? ""}`}
data-domain={domain?.toLowerCase()} data-domain={domain?.toLowerCase()}
title={getDisplayName(user, "")}> title={getDisplayName(user, "")}>
{icons && <div className="icons">{icons}</div>} {icons && <div className="icons">{icons}</div>}

View File

@ -58,6 +58,7 @@ import { ZapTarget } from "Zapper";
import { useStatusFeed } from "Feed/StatusFeed"; import { useStatusFeed } from "Feed/StatusFeed";
import messages from "./messages"; import messages from "./messages";
import { SpotlightMediaModal } from "../Element/Deck/SpotlightMedia";
const NOTES = 0; const NOTES = 0;
const REACTIONS = 1; const REACTIONS = 1;
@ -120,6 +121,7 @@ export default function ProfilePage() {
const isMe = loginPubKey === id; const isMe = loginPubKey === id;
const [showLnQr, setShowLnQr] = useState<boolean>(false); const [showLnQr, setShowLnQr] = useState<boolean>(false);
const [showProfileQr, setShowProfileQr] = useState<boolean>(false); const [showProfileQr, setShowProfileQr] = useState<boolean>(false);
const [showAvatarModal, setShowAvatarModal] = useState<boolean>(false);
const aboutText = user?.about || ""; const aboutText = user?.about || "";
const npub = !id?.startsWith(NostrPrefix.PublicKey) ? hexToBech32(NostrPrefix.PublicKey, id || undefined) : id; const npub = !id?.startsWith(NostrPrefix.PublicKey) ? hexToBech32(NostrPrefix.PublicKey, id || undefined) : id;
@ -428,7 +430,12 @@ export default function ProfilePage() {
function avatar() { function avatar() {
return ( return (
<div className="avatar-wrapper w-max"> <div className="avatar-wrapper w-max">
<Avatar pubkey={id ?? ""} user={user} /> <Avatar
pubkey={id ?? ""}
user={user}
onClick={() => user?.picture && setShowAvatarModal(true)}
className="pointer"
/>
<div className="profile-actions"> <div className="profile-actions">
{renderIcons()} {renderIcons()}
{!isMe && id && <FollowButton className="primary" pubkey={id} />} {!isMe && id && <FollowButton className="primary" pubkey={id} />}
@ -520,6 +527,9 @@ export default function ProfilePage() {
</div> </div>
</div> </div>
<div className="main-content">{tabContent()}</div> <div className="main-content">{tabContent()}</div>
{user?.picture && showAvatarModal && (
<SpotlightMediaModal onClose={() => setShowAvatarModal(false)} images={[user.picture]} idx={0} />
)}
</> </>
); );
} }