feat: a link profile image

packages/app/src/Element/ProfileImage.tsx

@@ -1,7 +1,6 @@
 import "./ProfileImage.css";
 
 import { useMemo } from "react";
-import { useNavigate } from "react-router-dom";
 import { HexKey, NostrPrefix } from "@snort/nostr";
 
 import { useUserProfile } from "Hooks/useUserProfile";
@@ -9,7 +8,7 @@ import { hexToBech32, profileLink } from "Util";
 import Avatar from "Element/Avatar";
 import Nip05 from "Element/Nip05";
 import { MetadataCache } from "Cache";
-import usePageWidth from "Hooks/usePageWidth";
+import { Link } from "react-router-dom";
 
 export interface ProfileImageProps {
   pubkey: HexKey;
@@ -17,10 +16,8 @@ export interface ProfileImageProps {
   showUsername?: boolean;
   className?: string;
   link?: string;
-  autoWidth?: boolean;
   defaultNip?: string;
   verifyNip?: boolean;
-  linkToProfile?: boolean;
   overrideUsername?: string;
 }
 
@@ -30,50 +27,32 @@ export default function ProfileImage({
   showUsername = true,
   className,
   link,
-  autoWidth = true,
   defaultNip,
   verifyNip,
-  linkToProfile = true,
   overrideUsername,
 }: ProfileImageProps) {
-  const navigate = useNavigate();
   const user = useUserProfile(pubkey);
   const nip05 = defaultNip ? defaultNip : user?.nip05;
-  const width = usePageWidth();
 
   const name = useMemo(() => {
     return overrideUsername ?? getDisplayName(user, pubkey);
   }, [user, pubkey, overrideUsername]);
 
-  if (!pubkey && !link) {
-    link = "#";
-  }
-
-  const onAvatarClick = () => {
-    if (linkToProfile) {
-      navigate(link ?? profileLink(pubkey));
-    }
-  };
-
   return (
-    <div className={`pfp f-ellipsis${className ? ` ${className}` : ""}`} onClick={onAvatarClick}>
+    <Link className={`pfp${className ? ` ${className}` : ""}`} to={link === undefined ? profileLink(pubkey) : ""}>
       <div className="avatar-wrapper">
         <Avatar user={user} />
       </div>
       {showUsername && (
-        <div className="profile-name">
+        <div className="f-ellipsis">
           <div className="username">
-            <div className="display-name">
-              <div>{name.trim()}</div>
-              {nip05 && <Nip05 nip05={nip05} pubkey={pubkey} verifyNip={verifyNip} />}
-            </div>
-          </div>
-          <div className="subheader" style={{ width: autoWidth ? width - 190 : "" }}>
-            {subHeader}
+            <div>{name.trim()}</div>
+            {nip05 && <Nip05 nip05={nip05} pubkey={pubkey} verifyNip={verifyNip} />}
           </div>
+          <div className="subheader">{subHeader}</div>
         </div>
       )}
-    </div>
+    </Link>
   );
 }