update 2nd

1 files changed, 21 insertions, 1 deletions

diff --git a/components/navbar.js b/components/navbar.js
index 3a8c5de..e0c1047 100644
--- a/components/navbar.js
+++ b/components/navbar.js
@@ -1,8 +1,11 @@
 import React, { useState, useEffect } from "react";
 import { useTheme } from "next-themes";
 import Link from "next/link";
+import { useSession, signIn, signOut } from "next-auth/react";
+import Image from "next/image";
 
 function Navbar(props) {
+  const { data: session, status } = useSession();
   const [isVisible, setIsVisible] = useState(false);
   const [fade, setFade] = useState(false);
   const { systemTheme, theme, setTheme } = useTheme();
@@ -22,6 +25,8 @@ function Navbar(props) {
     setFade(false);
   };
 
+  // console.log(session.user?.image);
+
   return (
     <header className={`${props.className}`}>
       <div className="flex h-16 w-auto items-center justify-between px-5 md:mx-auto md:w-[80%] md:px-0 text-white">
@@ -181,7 +186,7 @@ function Navbar(props) {
         </div>
 
         <nav className="left-0 top-[-100%] hidden w-auto items-center gap-10 px-5 md:flex">
-          <ul className="hidden gap-10 font-roboto text-xl md:flex ">
+          <ul className="hidden gap-10 font-roboto text-xl md:flex items-center">
             <li>
               <Link
                 href="/"
@@ -206,6 +211,21 @@ function Navbar(props) {
                 search
               </Link>
             </li>
+            {!session && (
+              <li>
+                <button
+                  onClick={() => signIn("AniListProvider")}
+                  className="ring-1 ring-action font-karla font-bold  p-2 rounded-md"
+                >
+                  Sign in
+                </button>
+              </li>
+            )}
+            {session && (
+              <li className="h-16 w-16 p-2">
+                <img src={session?.user.image.large} alt="imagine" />
+              </li>
+            )}
           </ul>
         </nav>
       </div>