restructured and clean up

2023-03-05 09:27:16 +07:00
parent 8b86aca23c
commit 13dda65a39
27 changed files with 69 additions and 212 deletions
@@ -0,0 +1,74 @@
+import ActiveLink from '@components/activeLink';
+import CreatePost from '@components/columns/navigator/createPost';
+import { UserDropdownMenu } from '@components/columns/navigator/userDropdownMenu';
+
+import { PlusIcon } from '@radix-ui/react-icons';
+import { useLocalStorage } from '@rehooks/local-storage';
+
+export default function NavigatorColumn() {
+  const [currentUser]: any = useLocalStorage('current-user');
+  const profile = JSON.parse(currentUser.metadata);
+
+  return (
+    <div className="flex h-full flex-col flex-wrap justify-between overflow-hidden px-2 pt-3 pb-4">
+      <div className="flex flex-col gap-4">
+        {/* Create post */}
+        <div className="flex flex-col rounded-lg bg-zinc-900 ring-1 ring-white/10">
+          <div className="flex flex-col p-2">
+            <div className="flex items-center justify-between">
+              <h5 className="font-semibold leading-tight text-zinc-100">{profile.display_name || ''}</h5>
+              <UserDropdownMenu pubkey={currentUser.pubkey} />
+            </div>
+            <span className="text-sm leading-tight text-zinc-500">@{profile.username || ''}</span>
+          </div>
+          <div className="p-2">
+            <CreatePost />
+          </div>
+        </div>
+        {/* Newsfeed */}
+        <div className="flex flex-col gap-2">
+          <div className="flex items-center justify-between px-2">
+            <h3 className="text-sm font-bold text-zinc-400">Newsfeed</h3>
+            <button
+              type="button"
+              className="group flex h-6 w-6 items-center justify-center rounded-full hover:bg-zinc-900"
+            >
+              <PlusIcon className="h-3 w-3 text-zinc-400 group-hover:text-zinc-100" />
+            </button>
+          </div>
+          <div className="flex flex-col gap-1 text-zinc-500">
+            <ActiveLink
+              href={`/newsfeed/following`}
+              activeClassName="ring-1 ring-white/10 dark:bg-zinc-900 dark:text-white"
+              className="flex h-10 items-center gap-1 rounded-lg px-2.5 text-sm font-medium hover:bg-zinc-900"
+            >
+              <span>#</span>
+              <span>following</span>
+            </ActiveLink>
+            <ActiveLink
+              href={`/newsfeed/global`}
+              activeClassName="ring-1 ring-white/10 dark:bg-zinc-900 dark:text-white"
+              className="flex h-10 items-center gap-1 rounded-lg px-2.5 text-sm font-medium hover:bg-zinc-900"
+            >
+              <span>#</span>
+              <span>global</span>
+            </ActiveLink>
+          </div>
+        </div>
+        {/* Messages */}
+        <div className="flex flex-col gap-2">
+          <div className="flex items-center justify-between px-2">
+            <h3 className="text-sm font-bold text-zinc-400">Direct Messages</h3>
+            <button
+              type="button"
+              className="group flex h-6 w-6 items-center justify-center rounded-full hover:bg-zinc-900"
+            >
+              <PlusIcon className="h-3 w-3 text-zinc-400 group-hover:text-zinc-100" />
+            </button>
+          </div>
+          <div></div>
+        </div>
+      </div>
+    </div>
+  );
+}