updated profile page

src/components/columns/account/active.tsx

@@ -19,10 +19,7 @@ export const ActiveAccount = memo(function ActiveAccount({ user }: { user: any }
   const [currentUser]: any = useLocalStorage('current-user');
 
   const openProfile = () => {
-    router.push({
-      pathname: '/profile',
-      query: { id: currentUser.id },
-    });
+    router.push(`/users/${currentUser.id}`);
   };
 
   // save follows to database

src/components/profile/followers.tsx

@@ -0,0 +1,24 @@
+import { RelayContext } from '@components/contexts/relay';
+
+import useLocalStorage from '@rehooks/local-storage';
+import destr from 'destr';
+import { Author } from 'nostr-relaypool';
+import { useContext, useEffect, useState } from 'react';
+
+export default function ProfileFollowers({ id }: { id: string }) {
+  const relayPool: any = useContext(RelayContext);
+  const [relays]: any = useLocalStorage('relays');
+
+  const [followers, setFollowers] = useState(null);
+
+  useEffect(() => {
+    const user = new Author(relayPool, relays, id);
+    user.followers((res) => setFollowers(destr(res.tags)), 0, 100);
+  }, [id, relayPool, relays]);
+
+  return (
+    <div className="flex flex-col gap-3 py-5">
+      {followers && followers.map((follower, index) => <p key={index}>{follower[1]}</p>)}
+    </div>
+  );
+}

src/components/profile/follows.tsx

@@ -0,0 +1,23 @@
+import { RelayContext } from '@components/contexts/relay';
+
+import useLocalStorage from '@rehooks/local-storage';
+import { Author } from 'nostr-relaypool';
+import { useContext, useEffect, useState } from 'react';
+
+export default function ProfileFollows({ id }: { id: string }) {
+  const relayPool: any = useContext(RelayContext);
+  const [relays]: any = useLocalStorage('relays');
+
+  const [follows, setFollows] = useState(null);
+
+  useEffect(() => {
+    const user = new Author(relayPool, relays, id);
+    user.follows((res) => setFollows(res), 0);
+  }, [id, relayPool, relays]);
+
+  return (
+    <div className="flex flex-col gap-3 py-5">
+      {follows && follows.map((follow, index) => <p key={index}>{follow.pubkey}</p>)}
+    </div>
+  );
+}

src/components/profile/metadata.tsx

@@ -0,0 +1,68 @@
+import { RelayContext } from '@components/contexts/relay';
+import { ImageWithFallback } from '@components/imageWithFallback';
+
+import { truncate } from '@utils/truncate';
+
+import useLocalStorage from '@rehooks/local-storage';
+import Avatar from 'boring-avatars';
+import destr from 'destr';
+import Image from 'next/image';
+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 relayPool: any = useContext(RelayContext);
+  const [relays]: any = useLocalStorage('relays');
+
+  const [profile, setProfile] = useState(null);
+
+  useEffect(() => {
+    const user = new Author(relayPool, relays, id);
+    user.metaData((res) => setProfile(destr(res.content)), 0);
+  }, [id, relayPool, relays]);
+
+  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"
+            fill={true}
+            className="h-full 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">
+            {profile?.picture ? (
+              <ImageWithFallback src={profile.picture} alt={id} fill={true} className="rounded-lg object-cover" />
+            ) : (
+              <Avatar
+                size={64}
+                name={id}
+                variant="beam"
+                square={true}
+                colors={['#FEE2E2', '#FEF3C7', '#F59E0B', '#EC4899', '#D946EF', '#8B5CF6']}
+              />
+            )}
+          </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 && truncate(id, 16, ' .... '))}
+            </span>
+          </div>
+          <div className="prose-sm prose-zinc leading-tight dark:prose-invert">{profile?.about}</div>
+        </div>
+      </div>
+    </>
+  );
+}

src/components/profile/notes.tsx

@@ -0,0 +1,31 @@
+import { RelayContext } from '@components/contexts/relay';
+import { Content } from '@components/note/content';
+
+import useLocalStorage from '@rehooks/local-storage';
+import { Author } from 'nostr-relaypool';
+import { useContext, useEffect, useState } from 'react';
+
+export default function ProfileNotes({ id }: { id: string }) {
+  const relayPool: any = useContext(RelayContext);
+  const [relays]: any = useLocalStorage('relays');
+
+  const [data, setData] = useState([]);
+
+  useEffect(() => {
+    const user = new Author(relayPool, relays, id);
+    user.text((res) => setData((data) => [...data, res]), 0, 100);
+  }, [id, relayPool, relays]);
+
+  return (
+    <div className="flex flex-col">
+      {data.map((item) => (
+        <div
+          key={item.id}
+          className="flex h-min min-h-min w-full select-text flex-col border-b border-zinc-800 px-3 py-5 hover:bg-black/20"
+        >
+          <Content data={item} />
+        </div>
+      ))}
+    </div>
+  );
+}

src/components/user/extend.tsx

@@ -8,14 +8,21 @@ import { fetch } from '@tauri-apps/api/http';
 import Avatar from 'boring-avatars';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
+import { useRouter } from 'next/router';
 import { memo, useCallback, useContext, useEffect, useState } from 'react';
 
 dayjs.extend(relativeTime);
 
 export const UserExtend = memo(function UserExtend({ pubkey, time }: { pubkey: string; time: any }) {
+  const router = useRouter();
   const { db }: any = useContext(DatabaseContext);
   const [profile, setProfile] = useState(null);
 
+  const openUserPage = (e) => {
+    e.stopPropagation();
+    router.push(`/users/${pubkey}`);
+  };
+
   const fetchProfile = useCallback(async (id: string) => {
     const res = await fetch(`https://rbr.bio/${id}/metadata.json`, {
       method: 'GET',
@@ -54,8 +61,8 @@ export const UserExtend = memo(function UserExtend({ pubkey, time }: { pubkey: s
   }, [fetchProfile, getCacheProfile, insertCacheProfile, pubkey]);
 
   return (
-    <div className="flex items-start gap-2">
-      <div className="relative h-11 w-11 shrink overflow-hidden rounded-md bg-zinc-900">
+    <div onClick={(e) => openUserPage(e)} className="group flex items-start gap-2">
+      <div className="relative h-11 w-11 shrink overflow-hidden rounded-md bg-zinc-900 ring-fuchsia-500 ring-offset-1 ring-offset-zinc-900 group-hover:ring-1">
         {profile?.picture ? (
           <ImageWithFallback
             src={profile.picture}
@@ -76,7 +83,7 @@ export const UserExtend = memo(function UserExtend({ pubkey, time }: { pubkey: s
       <div className="flex w-full flex-1 items-start justify-between">
         <div className="flex w-full justify-between">
           <div className="flex items-baseline gap-2 text-sm">
-            <span className="font-bold leading-tight">
+            <span className="font-bold leading-tight group-hover:underline">
               {profile?.display_name || profile?.name || truncate(pubkey, 16, ' .... ')}
             </span>
             <span className="leading-tight text-zinc-500">·</span>