wip: restructure

src/shared/profile/metadata.tsx

@@ -0,0 +1,45 @@
+import { RelayContext } from '@lume/shared/relaysProvider';
+import { DEFAULT_AVATAR, READONLY_RELAYS } from '@lume/stores/constants';
+import { shortenKey } from '@lume/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">
+          <img 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">
+            <img 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-zinc-100">
+              {profile?.display_name || profile?.name}
+            </h3>
+            <span className="text-sm 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>
+    </>
+  );
+}