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 className='flex flex-row h-12 bg-gray-900 justify-end items-center p-4 gap-1 shadow mb-4'>
            {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>
                </>
            )}
        </nav>
    );
}