🥎🤾🏼‍♂️ ↝ [ FCDB-24 ] Login modal integrated into workflow, signup later

Author: Gizmotronn

components/Section/Navbar.tsx

@@ -29,13 +29,30 @@ export const UserMenuItems = ({
   setMobileMenuOpen?: React.Dispatch<React.SetStateAction<boolean>>;
 }) => {
   const router = useRouter();
+  
+  const supabase = useSupabaseClient();
 
   const handleMobileMenuClick = () => {
     if (setMobileMenuOpen) {
       setMobileMenuOpen(false);
     }
   };
 
+  const handleLogout = async () => {
+    try {
+      const { error } = await supabase.auth.signOut();
+      if (error) {
+        // Handle error
+        console.error('Error signing out:', error.message);
+      } else {
+        // Redirect or perform other actions after successful sign out
+        router.push('/'); // Example: Redirect to the home page
+      }
+    } catch (error) {
+      console.error('Error signing out:', error.message);
+    }
+  };
+
   return (
     <>
       <ul
@@ -99,6 +116,7 @@ export const UserMenuItems = ({
         </li>
       </ul>
       <button
+        onClick={handleLogout}
         className={`flex items-center gap-3.5 py-4 text-sm font-medium duration-300 ease-in-out hover:text-yellow-500 ${
           router.pathname === '/admin' ? 'px-6' : 'sm:px-6'
         }`}

pages/index.tsx

@@ -179,7 +179,7 @@ export function PublicLanding () {
                 </p>
                 <div className='mt-10 flex items-center justify-center gap-x-6'>
                   <a
-                    href='/'
+                    href='/login'
                     className='rounded-md px-3.5 py-2.5 text-sm font-semibold text-gray-700 ring-1 ring-inset ring-gray-200 hover:ring-2 hover:ring-yellow-300 shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 dark:text-white'
                   >
                     Get Started <span aria-hidden='true'>→</span>

pages/login/index.tsx

@@ -21,7 +21,7 @@ const Login = () => {
         <div className='container' style={{ padding: '50px 0 100px 0' }}>
             {!session ? (
                 // <div className='w-80%'><Auth supabaseClient={supabase} appearance={{ theme: ThemeSupa }} theme='dark' /></div>
-                <div><LoginPage /></div>
+                <Layout><LoginPage /></Layout>
             ) : (
                 <Layout>Logged in</Layout>
             )}