74 lines
2.7 KiB
TypeScript
74 lines
2.7 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { useSession, signOut } from "next-auth/react";
|
|
|
|
export function Navbar() {
|
|
const { data: session } = useSession();
|
|
|
|
return (
|
|
<nav className="sticky top-0 z-40 border-b border-neutral-200 bg-white/90 backdrop-blur-md">
|
|
<div className="mx-auto flex h-14 max-w-6xl items-center justify-between px-4">
|
|
<Link href="/" className="flex items-center gap-1.5">
|
|
<span className="flex h-7 w-7 items-center justify-center rounded-lg bg-primary-600 text-xs font-bold text-white">
|
|
S
|
|
</span>
|
|
<span className="text-lg font-bold text-neutral-800">
|
|
Se<span className="text-primary-600">Trip</span>
|
|
</span>
|
|
</Link>
|
|
|
|
<div className="flex items-center gap-1">
|
|
<Link
|
|
href="/trips"
|
|
className="rounded-lg px-3 py-1.5 text-sm font-medium text-neutral-600 transition-colors hover:bg-neutral-100 hover:text-neutral-800"
|
|
>
|
|
Open Trip
|
|
</Link>
|
|
|
|
{session?.user ? (
|
|
<>
|
|
<Link
|
|
href="/create-trip"
|
|
className="rounded-lg px-3 py-1.5 text-sm font-medium text-neutral-600 transition-colors hover:bg-neutral-100 hover:text-neutral-800"
|
|
>
|
|
Buat Trip
|
|
</Link>
|
|
|
|
<div className="ml-2 flex items-center gap-2">
|
|
<div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary-600 text-xs font-bold text-white">
|
|
{session.user.name?.charAt(0).toUpperCase()}
|
|
</div>
|
|
<span className="hidden text-sm font-medium text-neutral-700 sm:block">
|
|
{session.user.name}
|
|
</span>
|
|
<button
|
|
onClick={() => signOut()}
|
|
className="rounded-lg px-2.5 py-1.5 text-sm font-medium text-neutral-500 transition-colors hover:bg-neutral-100 hover:text-neutral-700"
|
|
>
|
|
Logout
|
|
</button>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<>
|
|
<Link
|
|
href="/login"
|
|
className="rounded-lg px-3 py-1.5 text-sm font-medium text-neutral-600 transition-colors hover:bg-neutral-100 hover:text-neutral-800"
|
|
>
|
|
Login
|
|
</Link>
|
|
<Link
|
|
href="/register"
|
|
className="ml-1 rounded-lg bg-primary-600 px-4 py-1.5 text-sm font-semibold text-white transition-colors hover:bg-primary-700"
|
|
>
|
|
Daftar
|
|
</Link>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
);
|
|
}
|