38 lines
1.2 KiB
TypeScript
38 lines
1.2 KiB
TypeScript
import { signOut, useSession } from 'next-auth/react';
|
|
import { useRouter } from 'next/router';
|
|
import { LinkButton } from './Button';
|
|
|
|
export default function NavBar() {
|
|
const { data, status } = useSession();
|
|
const router = useRouter();
|
|
|
|
return (
|
|
<nav>
|
|
<ul className='flex flex-row h-12 bg-gray-900 justify-start items-center p-4 gap-1 shadow mb-4'>
|
|
<li>
|
|
<LinkButton href='/'>Comicbox</LinkButton>
|
|
</li>
|
|
|
|
<li className='flex-1' aria-hidden />
|
|
|
|
<li>
|
|
{status === 'loading' && <>...</>}
|
|
{status === 'unauthenticated' && (
|
|
<LinkButton
|
|
href={`/login?return=${encodeURIComponent(router.asPath)}`}
|
|
>
|
|
Log in
|
|
</LinkButton>
|
|
)}
|
|
{status === 'authenticated' && (
|
|
<>
|
|
<span>{data?.user?.name}</span>
|
|
<button onClick={() => signOut()}>(Log out)</button>
|
|
</>
|
|
)}
|
|
</li>
|
|
</ul>
|
|
|
|
</nav>
|
|
);
|
|
}
|