Fix hydration error & auth button

src/components/footer.tsx

@@ -6,10 +6,8 @@ export default function Footer() {
         <>
             <div className="absolute bottom-0 left-0 w-full bg-gray-900 p-2 text-white">
                 <p className="text-center">
-                    <Link href="mailto:alex@alexavfrantz.com">
-                        <p className="hover:text-gray-500 hover:underline hover:cursor-pointer">
-                            alex@alexavfrantz.com
-                        </p>
+                    <Link href="mailto:alex@alexavfrantz.com" className="hover:text-gray-500 hover:underline hover:cursor-pointer">
+                        alex@alexavfrantz.com
                     </Link>
                 </p>
                 <p className="text-center">

src/components/header.tsx

@@ -1,5 +1,4 @@
 import {useSession, signIn, signOut} from 'next-auth/react';
-import Head from 'next/head';
 import HeaderItem from "./HeaderItem";
 
 export default function Header() {
@@ -12,7 +11,13 @@ export default function Header() {
                 <div className="inline-block pb-2">
                     <HeaderItem content="home" linkTo="/" />
                     <HeaderItem content="reviews" linkTo="/reviews" />
-                    <HeaderItem content={status == "unauthenticated" ? "login" : "logout" } onClick={status == "authenticated" ? signOut : signIn} linkTo="" />
+                    <HeaderItem content={status == "unauthenticated" ? "login" : "logout" } onClick={async () => {
+                        if (status == "unauthenticated") {
+                            await signIn()
+                        } else {
+                            await signOut()
+                        }
+                    }} linkTo="" />
                 </div>
                 <hr />
             </div>