39 lines
1.3 KiB
TypeScript
39 lines
1.3 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 dots-between'>
|
|
<li className='no-dot'>
|
|
<LinkButton href='/'>Comicbox</LinkButton>
|
|
</li>
|
|
|
|
<li className='flex-1 no-dot' 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>
|
|
);
|
|
}
|