release 0.3.4

apps/web/ui/layout/navbar.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import Link from "next/link";
+import Image from "next/image";
+import useScroll from "@/lib/hooks/use-scroll";
+import { useSignInModal } from "./sign-in-modal";
+import UserDropdown from "./user-dropdown";
+import { Session } from "next-auth";
+import { Suspense } from "react";
+import { useEditNicknameModal } from "./edit-nickname-modal";
+import Logo from "../shared/icons/logo";
+
+export default function NavBar({ session }: { session: Session | null }) {
+  const { SignInModal, setShowSignInModal } = useSignInModal();
+  const { EditModal, setShowEditModal } = useEditNicknameModal(session);
+  const scrolled = useScroll(50);
+
+  return (
+    <>
+      <SignInModal />
+      <EditModal />
+      <div
+        className={`fixed top-0 flex w-full justify-center ${
+          scrolled
+            ? "bg-white/50 border-b border-gray-200 backdrop-blur-xl"
+            : "bg-white/0"
+        } z-[9999] transition-all`}
+      >
+        <div className="mx-5 flex h-16 w-full max-w-screen-xl items-center justify-between">
+          <div className="flex gap-2">
+            <Link
+              href="/"
+              className="font-display flex flex-col items-center justify-center text-xl"
+            >
+              <Logo className="h-5 w-5" />
+            </Link>
+            <Link href="/" className="font-bold">
+              <span className="bg-gradient-to-r from-cyan-500 via-cyan-600 to-cyan-800 bg-clip-text text-transparent ">
+                INKE
+              </span>
+              <span>.AI</span>
+            </Link>
+          </div>
+
+          <Suspense>
+            <div className="flex items-center justify-center gap-3 md:gap-5">
+              {/*<Link
+                href="https://www.producthunt.com/products/inke?utm_source=badge-follow&utm_medium=badge&utm_souce=badge-inke"
+                target="_blank"
+              >
+                <Image
+                  src="/follow.svg"
+                  alt="Inke | Product Hunt"
+                  width="86"
+                  height="32"
+                />
+              </Link> */}
+
+              <Link
+                className="text-slate-600 transition-all hover:text-slate-300"
+                href={"/document"}
+              >
+                Docs
+              </Link>
+              <Link
+                className="text-slate-600 transition-all hover:text-slate-300"
+                href={"/pricing"}
+              >
+                Pricing
+              </Link>
+
+              {session ? (
+                <UserDropdown
+                  session={session}
+                  setShowEditModal={setShowEditModal}
+                />
+              ) : (
+                <button
+                  className="bg-gradient-to-r from-slate-400 via-slate-600 to-slate-800 bg-clip-text py-1.5 font-semibold text-transparent transition-all hover:text-slate-300"
+                  onClick={() => setShowSignInModal(true)}
+                >
+                  Sign in
+                </button>
+              )}
+            </div>
+          </Suspense>
+        </div>
+      </div>
+    </>
+  );
+}