avatar component

src/element/Avatar.css

@@ -0,0 +1,35 @@
+.avatar {
+    border-radius: 50%;
+    height: 210px;
+    width: 210px;
+    background-image: var(--img-url), var(--gray-gradient);
+    border: 2px solid transparent;
+    background-origin: border-box;
+    background-clip: content-box, border-box;
+    background-size: cover;
+    box-sizing: border-box;
+}
+
+.avatar[data-domain="snort.social"] {
+    background-image: var(--img-url), var(--snort-gradient);
+}
+
+.avatar[data-domain="nostrplebs.com"] {
+    background-image: var(--img-url), var(--nostrplebs-gradient);
+}
+
+.avatar[data-domain="nostrpurple.com"] {
+    background-image: var(--img-url), var(--nostrplebs-gradient);
+}
+
+.avatar[data-domain="nostr.fan"] {
+    background-image: var(--img-url), var(--nostrplebs-gradient);
+}
+
+.avatar[data-domain="nostrich.zone"] {
+    background-image: var(--img-url), var(--nostrplebs-gradient);
+}
+
+.avatar[data-domain="nostriches.net"] {
+    background-image: var(--img-url), var(--nostrplebs-gradient);
+}

src/element/Avatar.tsx

@@ -0,0 +1,26 @@
+import "./Avatar.css";
+// @ts-expect-error
+import Nostrich from "../nostrich.jpg";
+
+import { CSSProperties } from "react";
+
+import type { UserMetadata } from "../nostr";
+
+
+const Avatar = ({ user, ...rest }: { user?: UserMetadata }) => {
+    const avatarUrl = (user?.picture?.length ?? 0) === 0 ? Nostrich : user?.picture
+    const backgroundImage = `url(${avatarUrl})`
+    const domain = user?.nip05 && user.nip05.split('@')[1]
+    const style = { '--img-url': backgroundImage } as CSSProperties
+    return (
+        <div
+          {...rest}
+          style={style}
+          className="avatar"
+          data-domain={domain?.toLowerCase()}
+        >
+        </div>
+    )
+}
+
+export default Avatar

src/element/ProfileImage.css

@@ -3,11 +3,14 @@
     align-items: center;
 }
 
-.pfp img {
+.pfp .avatar-wrapper {
+  margin-right: 6px;
+}
+
+.pfp .avatar {
+    border-width: 1px;
     width: 40px;
     height: 40px;
-    margin-right: 10px;
-    border-radius: 100%;
     cursor: pointer;
 }
 

src/element/ProfileImage.tsx

@@ -6,7 +6,7 @@ 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 Avatar from "./Avatar"
 import Nip05 from "./Nip05";
 import { HexKey } from "../nostr";
 
@@ -35,7 +35,9 @@ export default function ProfileImage({ pubkey, subHeader, showUsername = true, c
 
     return (
         <div className={`pfp${className ? ` ${className}` : ""}`}>
-            <LazyImage src={hasImage ? user!.picture : Nostrich} onClick={() => navigate(link ?? profileLink(pubkey))} />
+            <div className="avatar-wrapper">
+               <Avatar user={user} onClick={() => navigate(link ?? profileLink(pubkey))} />
+            </div>
             {showUsername && (<div className="f-grow">
                 <Link key={pubkey} to={link ?? profileLink(pubkey)}>
                     <div className="profile-name">

src/pages/ProfilePage.css

@@ -44,42 +44,6 @@
     margin-left: 4px;
 }
 
-.profile .avatar {
-    border-radius: 50%;
-    height: 210px;
-    width: 210px;
-    background-image: var(--img-url), var(--gray-gradient);
-    border: 4px solid transparent;
-    background-origin: border-box;
-    background-clip: content-box, border-box;
-    background-size: cover;
-    box-sizing: border-box;
-}
-
-.profile .avatar[data-domain="snort.social"] {
-    background-image: var(--img-url), var(--snort-gradient);
-}
-
-.profile .avatar[data-domain="nostrplebs.com"] {
-    background-image: var(--img-url), var(--nostrplebs-gradient);
-}
-
-.profile .avatar[data-domain="nostrpurple.com"] {
-    background-image: var(--img-url), var(--nostrplebs-gradient);
-}
-
-.profile .avatar[data-domain="nostr.fan"] {
-    background-image: var(--img-url), var(--nostrplebs-gradient);
-}
-
-.profile .avatar[data-domain="nostrich.zone"] {
-    background-image: var(--img-url), var(--nostrplebs-gradient);
-}
-
-.profile .avatar[data-domain="nostriches.net"] {
-    background-image: var(--img-url), var(--nostrplebs-gradient);
-}
-
 .profile .name {
     display: flex;
     flex-direction: column;

src/pages/ProfilePage.tsx

@@ -1,6 +1,4 @@
 import "./ProfilePage.css";
-// @ts-ignore
-import Nostrich from "../nostrich.jpg";
 
 import { useEffect, useMemo, useState } from "react";
 import { useSelector } from "react-redux";
@@ -11,6 +9,7 @@ import { useNavigate, useParams } from "react-router-dom";
 import useProfile from "../feed/ProfileFeed";
 import FollowButton from "../element/FollowButton";
 import { extractLnAddress, parseId, hexToBech32 } from "../Util";
+import Avatar from "../element/Avatar";
 import Timeline from "../element/Timeline";
 import Text from '../element/Text'
 import LNURLTip from "../element/LNURLTip";
@@ -39,10 +38,7 @@ export default function ProfilePage() {
     const isMe = loginPubKey === id;
     const [showLnQr, setShowLnQr] = useState<boolean>(false);
     const [tab, setTab] = useState(ProfileTab.Notes);
-    const about = Text({ content: user?.about ?? "", users: new Map(), tags: [] })
-    const avatarUrl = (user?.picture?.length ?? 0) === 0 ? Nostrich : user?.picture
-    const backgroundImage = `url(${avatarUrl})`
-    const domain = user?.nip05 && user.nip05.split('@')[1]
+    const about = Text({ content: user?.about })
 
     useEffect(() => {
         setTab(ProfileTab.Notes);
@@ -109,8 +105,7 @@ export default function ProfilePage() {
     function avatar() {
         return (
             <div className="avatar-wrapper">
-                <div style={{ ['--img-url' as any]: backgroundImage }} className="avatar" data-domain={domain?.toLowerCase()}>
-                </div>
+              <Avatar user={user} />
             </div>
         )
     }