feat: change from dummy button to navbar button

libs/ui/src/organisms/navbar/navbar.tsx

@@ -2,11 +2,12 @@ import { MenuOutlined } from '@ant-design/icons';
 import { FC, ReactElement, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { Button } from '../../atoms/button';
-import { useSession } from '@imphnen-frontend-service/utils';
+import { useModalLogin, useSession } from '@imphnen-frontend-service/utils';
 
 export const Navbar: FC = (): ReactElement => {
   const { session, signOut, isAuthenticated } = useSession();
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const { setShowModalLogin } = useModalLogin();
 
   return (
     <div className="bg-primary-50 w-full px-[32px] pt-[32px] md:px-[60px] md:pt-[60px] lg:px-[80px] sticky top-0 z-50">
@@ -44,7 +45,7 @@ export const Navbar: FC = (): ReactElement => {
               </li>
               {!isAuthenticated ? (
                 <li>
-                  <Button>Login</Button>
+                  <Button onClick={() => setShowModalLogin(true)}>Login</Button>
                 </li>
               ) : (
                 <li className="flex gap-x-4">
@@ -88,12 +89,12 @@ export const Navbar: FC = (): ReactElement => {
                     </li>
                     {!isAuthenticated ? (
                       <li>
-                        <Link
-                          to="#"
-                          className="block text-gray-600 transition-colors px-4 py-2 text-center font-semibold"
+                        <Button
+                          onClick={() => setShowModalLogin(true)}
+                          className="block w-full text-gray-100 transition-colors px-4 py-2 text-center font-semibold"
                         >
                           Login
-                        </Link>
+                        </Button>
                       </li>
                     ) : (
                       <li>{session.user?.fullname}</li>

libs/utils/src/hooks/index.ts

@@ -1,2 +1,3 @@
 export * from './use-query-state';
 export * from './use-session';
+export * from './use-modal-login';

libs/utils/src/hooks/use-modal-login.tsx

@@ -0,0 +1,28 @@
+import { createContext, ReactNode, useContext, useState } from 'react';
+
+interface ModalLoginContextType {
+  showModalLogin: boolean;
+  setShowModalLogin: (value: boolean) => void;
+}
+
+const ModalLoginContext = createContext<ModalLoginContextType | undefined>(
+  undefined
+);
+
+export const ModalLoginProvider = ({ children }: { children: ReactNode }) => {
+  const [showModalLogin, setShowModalLogin] = useState(false);
+
+  return (
+    <ModalLoginContext.Provider value={{ showModalLogin, setShowModalLogin }}>
+      {children}
+    </ModalLoginContext.Provider>
+  );
+};
+
+export const useModalLogin = () => {
+  const context = useContext(ModalLoginContext);
+  if (!context) {
+    throw new Error('useModalLogin must be used within an ModalLoginProvider');
+  }
+  return context;
+};