From fe6d510e18ab16c0bc0f1ceb363ff32a87f42a40 Mon Sep 17 00:00:00 2001
From: Ren Amamiya <123083837+reyamir@users.noreply.github.com>
Date: Sun, 19 Mar 2023 17:16:36 +0700
Subject: [PATCH] added user profile page

---
 package.json                |  1 +
 pnpm-lock.yaml              | 22 ++++++++++++
 src/pages/profile/index.tsx | 70 +++++++++++++++++++++++++++++++++----
 3 files changed, 87 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 3af5cc8e..9a4b11b3 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "@radix-ui/react-dialog": "^1.0.3",
     "@radix-ui/react-dropdown-menu": "^2.0.4",
     "@radix-ui/react-icons": "^1.2.0",
+    "@radix-ui/react-tabs": "^1.0.3",
     "@rehooks/local-storage": "^2.4.4",
     "@supabase/supabase-js": "^2.10.0",
     "@tauri-apps/api": "^1.2.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ada4da67..d3065de6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -5,6 +5,7 @@ specifiers:
   '@radix-ui/react-dialog': ^1.0.3
   '@radix-ui/react-dropdown-menu': ^2.0.4
   '@radix-ui/react-icons': ^1.2.0
+  '@radix-ui/react-tabs': ^1.0.3
   '@rehooks/local-storage': ^2.4.4
   '@supabase/supabase-js': ^2.10.0
   '@tailwindcss/typography': ^0.5.9
@@ -58,6 +59,7 @@ dependencies:
   '@radix-ui/react-dialog': 1.0.3_zula6vjvt3wdocc4mwcxqa6nzi
   '@radix-ui/react-dropdown-menu': 2.0.4_zula6vjvt3wdocc4mwcxqa6nzi
   '@radix-ui/react-icons': 1.2.0_react@18.2.0
+  '@radix-ui/react-tabs': 1.0.3_biqbaboplfbrettd7655fr4n2y
   '@rehooks/local-storage': 2.4.4_react@18.2.0
   '@supabase/supabase-js': 2.10.0
   '@tauri-apps/api': 1.2.0
@@ -1046,6 +1048,26 @@ packages:
       react: 18.2.0
     dev: false
 
+  /@radix-ui/react-tabs/1.0.3_biqbaboplfbrettd7655fr4n2y:
+    resolution:
+      { integrity: sha512-4CkF/Rx1GcrusI/JZ1Rvyx4okGUs6wEenWA0RG/N+CwkRhTy7t54y7BLsWUXrAz/GRbBfHQg/Odfs/RoW0CiRA== }
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    dependencies:
+      '@babel/runtime': 7.21.0
+      '@radix-ui/primitive': 1.0.0
+      '@radix-ui/react-context': 1.0.0_react@18.2.0
+      '@radix-ui/react-direction': 1.0.0_react@18.2.0
+      '@radix-ui/react-id': 1.0.0_react@18.2.0
+      '@radix-ui/react-presence': 1.0.0_biqbaboplfbrettd7655fr4n2y
+      '@radix-ui/react-primitive': 1.0.2_biqbaboplfbrettd7655fr4n2y
+      '@radix-ui/react-roving-focus': 1.0.3_biqbaboplfbrettd7655fr4n2y
+      '@radix-ui/react-use-controllable-state': 1.0.0_react@18.2.0
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+    dev: false
+
   /@radix-ui/react-use-callback-ref/1.0.0_react@18.2.0:
     resolution:
       { integrity: sha512-GZtyzoHz95Rhs6S63D2t/eqvdFCm7I+yHMLVQheKM7nBD8mbZIt+ct1jz4536MDnaOGKIxynJ8eHTkVGVVkoTg== }
diff --git a/src/pages/profile/index.tsx b/src/pages/profile/index.tsx
index 511b427c..446a4040 100644
--- a/src/pages/profile/index.tsx
+++ b/src/pages/profile/index.tsx
@@ -1,19 +1,77 @@
 import BaseLayout from '@layouts/base';
 import WithSidebarLayout from '@layouts/withSidebar';
 
+import { RelayContext } from '@components/contexts/relay';
+
+import * as Tabs from '@radix-ui/react-tabs';
 import useLocalStorage from '@rehooks/local-storage';
-import { useRouter } from 'next/router';
-import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal } from 'react';
+import Image from 'next/image';
+import { Author } from 'nostr-relaypool';
+import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal, useContext, useMemo } from 'react';
 
 export default function Page() {
-  const router = useRouter();
-  const { id } = router.query;
+  const relayPool: any = useContext(RelayContext);
 
+  const [relays]: any = useLocalStorage('relays');
   const [currentUser]: any = useLocalStorage('current-user');
 
+  const user = new Author(relayPool, relays, currentUser.id);
+  const userProfile = JSON.parse(currentUser.metadata);
+
   return (
-    <div className="h-full w-full">
-      <p>{id}</p>
+    <div className="h-full w-full p-px">
+      <div className="relative">
+        <div className="relative h-64 w-full rounded-t-lg bg-zinc-800">
+          {userProfile.banner && (
+            <Image src={userProfile.banner} alt="user's banner" fill={true} className="h-full w-full object-cover" />
+          )}
+        </div>
+        <div className="relative -top-8 px-4">
+          <button className="relative h-16 w-16">
+            <Image src={userProfile.picture} alt="user's avatar" fill={true} className="rounded-lg object-cover" />
+          </button>
+        </div>
+      </div>
+      <div className="-mt-4 mb-8 px-4">
+        <div>
+          <div className="mb-3 flex flex-col">
+            <h3 className="text-xl font-bold leading-tight text-zinc-100">{userProfile.display_name}</h3>
+            <span className="leading-tight text-zinc-500">@{userProfile.username}</span>
+          </div>
+          <div className="prose prose-zinc leading-tight dark:prose-invert">{userProfile.about}</div>
+        </div>
+      </div>
+      <Tabs.Root className="flex w-full flex-col" defaultValue="notes">
+        <Tabs.List className="flex border-b border-zinc-800">
+          <Tabs.Trigger
+            className="flex h-10 flex-1 cursor-default select-none items-center justify-center px-5 text-sm font-medium leading-none text-zinc-400 outline-none hover:text-fuchsia-400 data-[state=active]:text-fuchsia-500 data-[state=active]:shadow-[inset_0_-1px_0_0,0_1px_0_0] data-[state=active]:shadow-current"
+            value="notes"
+          >
+            Notes
+          </Tabs.Trigger>
+          <Tabs.Trigger
+            className="flex h-10 flex-1 cursor-default select-none items-center justify-center px-5 text-sm font-medium text-zinc-400 outline-none placeholder:leading-none hover:text-fuchsia-400 data-[state=active]:text-fuchsia-500 data-[state=active]:shadow-[inset_0_-1px_0_0,0_1px_0_0] data-[state=active]:shadow-current"
+            value="followers"
+          >
+            Followers
+          </Tabs.Trigger>
+          <Tabs.Trigger
+            className="flex h-10 flex-1 cursor-default select-none items-center justify-center px-5 text-sm font-medium leading-none text-zinc-400 outline-none hover:text-fuchsia-400 data-[state=active]:text-fuchsia-500 data-[state=active]:shadow-[inset_0_-1px_0_0,0_1px_0_0] data-[state=active]:shadow-current"
+            value="following"
+          >
+            Following
+          </Tabs.Trigger>
+        </Tabs.List>
+        <Tabs.Content className="px-4" value="notes">
+          <p>Notes</p>
+        </Tabs.Content>
+        <Tabs.Content className="px-4" value="followers">
+          <p>Followers</p>
+        </Tabs.Content>
+        <Tabs.Content className="px-4" value="following">
+          <p>Following</p>
+        </Tabs.Content>
+      </Tabs.Root>
     </div>
   );
 }