diff --git a/src/element/Avatar.css b/src/element/Avatar.css new file mode 100644 index 00000000..45ca77dd --- /dev/null +++ b/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); +} diff --git a/src/element/Avatar.tsx b/src/element/Avatar.tsx new file mode 100644 index 00000000..a08e7877 --- /dev/null +++ b/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 ( +