62 lines
1.8 KiB
TypeScript
62 lines
1.8 KiB
TypeScript
import { Image } from "@shared/image";
|
|
import { RelayContext } from "@shared/relayProvider";
|
|
|
|
import { DEFAULT_AVATAR, READONLY_RELAYS } from "@stores/constants";
|
|
|
|
import { shortenKey } from "@utils/shortenKey";
|
|
|
|
import destr from "destr";
|
|
import { Author } from "nostr-relaypool";
|
|
import { useContext, useEffect, useState } from "react";
|
|
|
|
const DEFAULT_BANNER =
|
|
"https://bafybeiacwit7hjmdefqggxqtgh6ht5dhth7ndptwn2msl5kpkodudsr7py.ipfs.w3s.link/banner-1.jpg";
|
|
|
|
export default function ProfileMetadata({ id }: { id: string }) {
|
|
const pool: any = useContext(RelayContext);
|
|
const [profile, setProfile] = useState(null);
|
|
|
|
useEffect(() => {
|
|
const user = new Author(pool, READONLY_RELAYS, id);
|
|
user.metaData((res) => setProfile(destr(res.content)), 0);
|
|
}, [id, pool]);
|
|
|
|
return (
|
|
<>
|
|
<div className="relative">
|
|
<div className="relative h-56 w-full rounded-t-lg bg-zinc-800">
|
|
<Image
|
|
src={profile?.banner || DEFAULT_BANNER}
|
|
alt="user's banner"
|
|
className="h-58 w-full object-cover"
|
|
/>
|
|
</div>
|
|
<div className="relative -top-8 z-10 px-4">
|
|
<div className="relative h-16 w-16 rounded-lg bg-zinc-900 ring-2 ring-zinc-900">
|
|
<Image
|
|
src={profile?.picture || DEFAULT_AVATAR}
|
|
alt={id}
|
|
className="h-16 w-16 rounded-lg object-cover"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="-mt-4 mb-8 px-4">
|
|
<div>
|
|
<div className="mb-3 flex flex-col">
|
|
<h3 className="text-lg font-semibold leading-tight text-white">
|
|
{profile?.display_name || profile?.name}
|
|
</h3>
|
|
<span className="text-base leading-tight text-zinc-500">
|
|
{profile?.username || (id && shortenKey(id))}
|
|
</span>
|
|
</div>
|
|
<div className="prose-sm prose-zinc leading-tight dark:prose-invert">
|
|
{profile?.about}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|