43 lines
1.4 KiB
TypeScript
43 lines
1.4 KiB
TypeScript
'use client'
|
|
|
|
import { useSession, signOut } from "next-auth/react";
|
|
import { UserIcon } from "./icons/UserIcon";
|
|
import Link from "next/link";
|
|
|
|
export default function Navbar() {
|
|
const { data: session, status } = useSession();
|
|
|
|
if (status === 'loading') return null;
|
|
if (!session?.user) return null
|
|
|
|
return (
|
|
<nav className="flex justify-between items-center p-4 bg-background border-b">
|
|
<div className="flex items-center space-x-2">
|
|
<div className="font-semibold">Wedding Planner</div>
|
|
{session.user && (
|
|
<Link
|
|
href={'/dashboard'}
|
|
>
|
|
Dashboard
|
|
</Link>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-2">
|
|
<Link href={`/user/${session.user.username}`} className="flex items-center space-x-2">
|
|
<UserIcon />
|
|
<span className="text-sm text-gray-600">
|
|
{session.user.email} ({session.user.role})
|
|
</span>
|
|
</Link>
|
|
<button
|
|
className="text-sm text-blue-600 underline"
|
|
onClick={() => signOut({ callbackUrl: '/login' })}
|
|
>
|
|
Logout
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
)
|
|
}
|