feat: fix conflic

app/components/popup/modal.tsx

@@ -7,6 +7,7 @@ import {
 } from '@headlessui/react'
 import type { ReactNode } from 'react'
 
+import { LeftArrow } from '~/components/icons/left-arrow'
 import { APP } from '~/data/meta'
 
 type ModalProperties = {
@@ -34,8 +35,17 @@ export const PopupModal = ({
         className="fixed inset-0 bg-black/50 duration-300 ease-out data-[closed]:opacity-0"
         transition
       />
-      <div className="fixed inset-0 flex w-screen items-center justify-center p-4">
-        <DialogPanel className="max-w-lg space-y-6 rounded-lg bg-white p-8 shadow-lg duration-300 ease-out data-[closed]:scale-95 data-[closed]:opacity-0">
+      <div className="fixed inset-0 flex w-screen justify-center p-4 max-sm:bg-white sm:items-center">
+        <DialogPanel className="max-w-lg space-y-6 rounded-lg bg-white p-8 duration-300 ease-out data-[closed]:scale-95 data-[closed]:opacity-0 sm:shadow-lg">
+          <button
+            onClick={onClose}
+            className="top-4 left-4 items-center"
+          >
+            <LeftArrow
+              width={50}
+              height={50}
+            />
+          </button>
           <DialogTitle className="flex justify-center">
             <img
               src={APP.logo}

app/components/ui/banner.tsx

@@ -11,7 +11,7 @@ export default function Banner() {
           className="mt-2 h-full py-2"
         >
           <img
-            src={'/public/images/banner.png'}
+            src={'/images/banner.png'}
             alt={APP.title}
             className="h-[70px] w-[100%] sm:h-full"
           />

app/components/ui/form-login.tsx

@@ -1,6 +1,5 @@
 // import { EyeIcon, EyeOffIcon } from 'lucide-react'
 import { useState, type Dispatch, type SetStateAction } from 'react'
-import { Link } from 'react-router'
 
 import { EyeIcon } from '~/components/icons/eye'
 
@@ -9,10 +8,11 @@ import { Button } from './button'
 type TProperties = {
   setIsRegisterOpen: Dispatch<SetStateAction<boolean>>
   setIsLoginOpen: Dispatch<SetStateAction<boolean>>
+  setIsForgetOpen: Dispatch<SetStateAction<boolean>>
 }
 
 export const FormLogin = (properties: TProperties) => {
-  const { setIsRegisterOpen, setIsLoginOpen } = properties
+  const { setIsRegisterOpen, setIsLoginOpen, setIsForgetOpen } = properties
   const [showPassword, setShowPassword] = useState(false)
 
   return (
@@ -67,14 +67,18 @@ export const FormLogin = (properties: TProperties) => {
           </div>
 
           {/* Lupa Kata Sandi */}
-          <div className="mb-4 flex justify-between">
+          <div className="mb-4 flex items-center justify-between text-sm">
             <span className="text-gray-600">Lupa Kata Sandi?</span>
-            <Link
-              to="/reset-password"
+            <Button
+              onClick={() => {
+                setIsLoginOpen(false)
+                setIsForgetOpen(true)
+              }}
               className="font-semibold text-[#2E2F7C]"
+              variant="link"
             >
               Reset Kata Sandi
-            </Link>
+            </Button>
           </div>
 
           {/* Tombol Masuk */}

app/contexts/news.tsx

@@ -10,6 +10,8 @@ type NewsContextProperties = {
   setIsLoginOpen: React.Dispatch<React.SetStateAction<boolean>>
   isRegisterOpen: boolean
   setIsRegisterOpen: React.Dispatch<React.SetStateAction<boolean>>
+  isForgetOpen: boolean
+  setForgetOpen: React.Dispatch<React.SetStateAction<boolean>>
 }
 
 const NewsContext = createContext<NewsContextProperties | undefined>(undefined)
@@ -17,10 +19,18 @@ const NewsContext = createContext<NewsContextProperties | undefined>(undefined)
 export const NewsProvider = ({ children }: PropsWithChildren) => {
   const [isLoginOpen, setIsLoginOpen] = useState(false)
   const [isRegisterOpen, setIsRegisterOpen] = useState(false)
+  const [isForgetOpen, setForgetOpen] = useState(false)
 
   return (
     <NewsContext.Provider
-      value={{ isLoginOpen, setIsLoginOpen, isRegisterOpen, setIsRegisterOpen }}
+      value={{
+        isLoginOpen,
+        setIsLoginOpen,
+        isRegisterOpen,
+        setIsRegisterOpen,
+        isForgetOpen,
+        setForgetOpen,
+      }}
     >
       {children}
     </NewsContext.Provider>

app/layouts/news/default.tsx

@@ -2,6 +2,7 @@ import { type PropsWithChildren } from 'react'
 
 import { PopupModal } from '~/components/popup/modal'
 import Banner from '~/components/ui/banner'
+import FormForgotPassword from '~/components/ui/form-forgot-password'
 import { FormLogin } from '~/components/ui/form-login'
 import { FormRegister } from '~/components/ui/form-register'
 import { useNewsContext } from '~/contexts/news'
@@ -13,8 +14,14 @@ import { HeaderTop } from './header-top'
 
 export const NewsDefaultLayout = (properties: PropsWithChildren) => {
   const { children } = properties
-  const { isLoginOpen, setIsLoginOpen, isRegisterOpen, setIsRegisterOpen } =
-    useNewsContext()
+  const {
+    isLoginOpen,
+    setIsLoginOpen,
+    isRegisterOpen,
+    setIsRegisterOpen,
+    isForgetOpen,
+    setForgetOpen,
+  } = useNewsContext()
   return (
     <main className="relative min-h-dvh bg-[#ECECEC]">
       <header>
@@ -39,16 +46,25 @@ export const NewsDefaultLayout = (properties: PropsWithChildren) => {
         <FormLogin
           setIsRegisterOpen={setIsRegisterOpen}
           setIsLoginOpen={setIsLoginOpen}
+          setIsForgetOpen={setForgetOpen}
         />
       </PopupModal>
 
       <PopupModal
         isOpen={isRegisterOpen}
         onClose={() => setIsRegisterOpen(false)}
-        description="Selamat Datang, silakan daftarkan akun Anda untuk melanjutkan!"
+        description="Selamat Datang, silakan isi keterangan akun Anda untuk melanjutkan!"
       >
         <FormRegister />
       </PopupModal>
+
+      <PopupModal
+        isOpen={isForgetOpen}
+        onClose={() => setForgetOpen(false)}
+        description="Selamat Datang, silakan isi keterangan akun Anda untuk melanjutkan!"
+      >
+        <FormForgotPassword />
+      </PopupModal>
     </main>
   )
 }

app/routes/_layout.dashboard.auth.login.tsx

@@ -2,7 +2,7 @@ const AuthLayout = () => {
   return (
     <div className="relative">
       <div className="flex min-h-screen items-center justify-center bg-gray-100">
-        Login form
+        Login
       </div>
     </div>
   )