From 74ea4baed859dfc0a04b1ecee8fa74313a725127 Mon Sep 17 00:00:00 2001
From: Brad Traversy <traversymedia@gmail.com>
Date: Wed, 10 Jul 2024 10:40:36 -0400
Subject: [PATCH] Profile image and sign out

---
 components/Navbar.jsx | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/components/Navbar.jsx b/components/Navbar.jsx
index 657c970..8e29937 100644
--- a/components/Navbar.jsx
+++ b/components/Navbar.jsx
@@ -10,6 +10,8 @@ import { signIn, signOut, useSession, getProviders } from 'next-auth/react';
 
 const Navbar = () => {
   const { data: session } = useSession();
+  const profileImage = session?.user?.image;
+
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
   const [isProfileMenuOpen, setIsProfileMenuOpen] = useState(false);
   const [providers, setProviders] = useState(null);
@@ -167,8 +169,10 @@ const Navbar = () => {
                     <span className='sr-only'>Open user menu</span>
                     <Image
                       className='h-8 w-8 rounded-full'
-                      src={profileDefault}
+                      src={profileImage || profileDefault}
                       alt=''
+                      width={40}
+                      height={40}
                     />
                   </button>
                 </div>
@@ -207,15 +211,18 @@ const Navbar = () => {
                     >
                       Saved Properties
                     </Link>
-                    <Link
-                      href='#'
+                    <button
+                      onClick={() => {
+                        setIsProfileMenuOpen(false);
+                        signOut();
+                      }}
                       className='block px-4 py-2 text-sm text-gray-700'
                       role='menuitem'
                       tabIndex='-1'
                       id='user-menu-item-2'
                     >
                       Sign Out
-                    </Link>
+                    </button>
                   </div>
                 )}
               </div>