update project structure

components/headerComponents/AvatarDropdown.tsx

@@ -0,0 +1,63 @@
+"use client"
+
+import * as React from "react"
+import { MoonIcon, SunIcon } from "@radix-ui/react-icons"
+import { useTheme } from "next-themes"
+
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar"
+import { useProfile } from "nostr-react"
+import Link from "next/link"
+import { nip19 } from "nostr-tools"
+
+export function AvatarDropdown() {
+
+  let pubkey = window.localStorage.getItem('pubkey');
+  let pubkeyEncoded = pubkey ? nip19.npubEncode(pubkey) : pubkey;
+
+  let src = "https://robohash.org/" + (pubkey as string);
+
+  const { data: userData } = useProfile({
+    pubkey: pubkey as string,
+  });
+
+  if (pubkey !== null) {
+    src = userData?.picture || "https://robohash.org/" + pubkey;
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        {/* <Button variant="outline" size="icon">
+          <SunIcon className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <MoonIcon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <span className="sr-only">Toggle theme</span>
+        </Button> */}
+        <Avatar>
+          <AvatarImage src={src} />
+        </Avatar>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem>
+          <Link href={`/profile/${pubkeyEncoded}`}>
+            Profile
+          </Link>
+        </DropdownMenuItem>
+        <DropdownMenuItem>
+          <Link href={`/profile/settings`}>
+            Settings
+          </Link>
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => { window.localStorage.clear(); window.location.href = "/" }}>
+          Logout
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

components/headerComponents/DropdownThemeMode.tsx

@@ -0,0 +1,40 @@
+"use client"
+
+import * as React from "react"
+import { MoonIcon, SunIcon } from "@radix-ui/react-icons"
+import { useTheme } from "next-themes"
+
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+
+export function DropdownThemeMode() {
+  const { setTheme } = useTheme()
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="icon">
+          <SunIcon className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <MoonIcon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme("light")}>
+          Light
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("dark")}>
+          Dark
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("system")}>
+          System
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

components/headerComponents/LoginButton.tsx

@@ -0,0 +1,13 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import React, { useRef } from 'react';
+import Link from "next/link";
+
+export default function LoginButton() {
+    return (
+        <Link href={"/login"}>
+            <Button variant={"secondary"}>Sign In</Button>
+        </Link>
+    );
+}

components/headerComponents/RegisterButton.tsx

@@ -0,0 +1,13 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import React, { useRef } from 'react';
+import Link from "next/link";
+
+export default function RegisterButton() {
+    return (
+        <Link href={"/onboarding"}>
+            <Button>Register</Button>
+        </Link>
+    );
+}

components/headerComponents/TopNavigation.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { siteConfig } from "@/config/site";
+import { useEffect, useState } from "react";
+import { TopNavigationItems } from "./TopNavigationItems";
+import { DropdownThemeMode } from "./DropdownThemeMode";
+import LoginButton from "./LoginButton";
+import { Button } from "../ui/button";
+import { AvatarDropdown } from "./AvatarDropdown";
+import RegisterButton from "./RegisterButton";
+
+export function TopNavigation() {
+  const [pubkey, setPubkey] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      setPubkey(window.localStorage.getItem('pubkey'));
+    }
+  }, []);
+
+  return (
+    <header className="bg-background/80 sticky top-0 z-40 w-full border-b backdrop-blur">
+      <div className="container flex h-16 items-center space-x-4 sm:justify-between sm:space-x-0">
+        <TopNavigationItems items={siteConfig.mainNav} />
+        <div className="flex flex-1 items-center justify-end space-x-4">
+          <nav className="flex items-center space-x-2">
+            <DropdownThemeMode />
+            {pubkey === null ? <RegisterButton /> : null}
+            {pubkey === null ? <LoginButton /> : null}
+            {/* {pubkey !== null ? <Button variant="secondary" onClick={() => { localStorage.removeItem('pubkey'); window.location.reload(); }}>Logout</Button> : null} */}
+            {pubkey !== null ? <AvatarDropdown /> : null}
+          </nav>
+        </div>
+      </div>
+    </header>
+  )
+}

components/headerComponents/TopNavigationItems.tsx

@@ -0,0 +1,42 @@
+import * as React from "react"
+import Link from "next/link"
+
+import { NavItem } from "@/types/nav"
+import { siteConfig } from "@/config/site"
+import { cn } from "@/lib/utils"
+// import { Icons } from "@/components/icons"
+
+interface TopNavigationItemsProps {
+  items?: NavItem[]
+}
+
+export function TopNavigationItems({ items }: TopNavigationItemsProps) {
+  return (
+    <div className="flex gap-6 md:gap-10">
+      <Link href="/" className="flex items-center space-x-2">
+        {/* <Icons.logo className="h-6 w-6" /> */}
+        <span className="inline-block font-bold">{siteConfig.name}</span>
+      </Link>
+      {/* TOP NAVIGATION ITEMS */}
+      {/* {items?.length ? (
+        <nav className="flex gap-6">
+          {items?.map(
+            (item, index) =>
+              item.href && (
+                <Link
+                  key={index}
+                  href={item.href}
+                  className={cn(
+                    "flex items-center text-sm font-medium text-muted-foreground",
+                    item.disabled && "cursor-not-allowed opacity-80"
+                  )}
+                >
+                  {item.title}
+                </Link>
+              )
+          )}
+        </nav>
+      ) : null} */}
+    </div>
+  )
+}