92 lines
3.0 KiB
TypeScript
92 lines
3.0 KiB
TypeScript
"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>
|
|
</>
|
|
);
|
|
}
|