comicbox/components/NavBar.tsx

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>
    );
}