feat: create AuthLayout component and refactor modal usage in forms

app/components/popup/header-modal.tsx

@@ -1,44 +0,0 @@
-import type { ReactNode } from 'react'
-import { Link } from 'react-router'
-
-import { LeftArrow } from '~/components/icons/left-arrow'
-import { APP } from '~/data/meta'
-
-type THeaderModal = {
-  typeForm?: string
-  titleForm?: string
-  children: ReactNode
-}
-export default function HeaderModal({ typeForm, children }: THeaderModal) {
-  return (
-    <>
-      <div className="absolute top-0 left-0 lg:hidden">
-        <Link
-          to="/#"
-          className="mt-2 h-full py-2"
-        >
-          <LeftArrow
-            width={'50px'}
-            height={'50px'}
-          />
-        </Link>
-      </div>
-      <div className="w-full max-w-md">
-        <div className="mb-6 flex justify-center">
-          <Link to="/news">
-            <img
-              src={APP.logo}
-              alt={APP.title}
-              className="h-[80px]"
-            />
-          </Link>
-        </div>
-
-        <div className="mb-4 p-4 text-center text-[#565658]">
-          {children}
-          <p>{typeForm}</p>
-        </div>
-      </div>
-    </>
-  )
-}

app/components/popup/modal.tsx

@@ -1,17 +1,27 @@
-import { Dialog, DialogBackdrop, DialogPanel } from '@headlessui/react'
+import {
+  Description,
+  Dialog,
+  DialogBackdrop,
+  DialogPanel,
+  DialogTitle,
+} from '@headlessui/react'
 import type { ReactNode } from 'react'
 
+import { APP } from '~/data/meta'
+
 type ModalProperties = {
   isOpen: boolean
   onClose: () => void
   children: ReactNode
+  description?: string
 }
 
-export default function PopupModal({
+export const PopupModal = ({
   isOpen,
   onClose,
   children,
-}: ModalProperties) {
+  description,
+}: ModalProperties) => {
   if (!isOpen) return
   return (
     <Dialog
@@ -25,7 +35,19 @@ export default function PopupModal({
         transition
       />
       <div className="fixed inset-0 flex w-screen items-center justify-center p-4">
-        <DialogPanel className="max-w-lg space-y-4 rounded-lg bg-white p-8 shadow-lg duration-300 ease-out data-[closed]:scale-95 data-[closed]:opacity-0">
+        <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">
+          <DialogTitle className="flex justify-center">
+            <img
+              src={APP.logo}
+              alt={APP.title}
+              className="h-[80px]"
+            />
+          </DialogTitle>
+          {description && (
+            <Description className="text-center text-[#565658]">
+              {description}
+            </Description>
+          )}
           <div className="relative">{children}</div>
         </DialogPanel>
       </div>

app/components/popup/succes-payment.tsx

@@ -1,16 +1,11 @@
 import { Button } from '@headlessui/react'
 
-import HeaderModal from '~/components/popup/header-modal'
 import { APP } from '~/data/meta'
 
 export default function PopupSuccessPayment() {
   return (
     <>
       <div className="relative flex flex-col items-center justify-center">
-        <HeaderModal>
-          <p>Selamat! Pembayaran anda berhasil!</p>
-        </HeaderModal>
-
         <div className="mb-4 p-4 text-center">
           <div className="flex justify-center">
             <img

app/components/ui/button.tsx

@@ -11,6 +11,7 @@ const buttonVariants = cva(
         newsPrimaryOutline: 'border-[3px] border-white text-white text-lg',
         newsSecondary: 'border-[3px] border-[#2E2F7C] text-[#2E2F7C] text-lg',
         icon: '',
+        link: '',
       },
       size: {
         default: 'h-[50px] w-[150px]',
@@ -18,6 +19,7 @@ const buttonVariants = cva(
         icon: 'h-9 w-9',
         sm: 'h-8 rounded-md px-3 text-xs',
         lg: 'h-10 rounded-md px-8',
+        fit: 'w-fit',
       },
     },
     defaultVariants: {

app/components/ui/form-forgot-password.tsx

@@ -1,13 +1,8 @@
-import HeaderModal from '~/components/popup/header-modal'
 import { Button } from '~/components/ui/button'
 
 export default function FormForgotPassword() {
   return (
     <div className="flex flex-col items-center justify-center">
-      <HeaderModal>
-        <p>Selamat Datang, silakan masukkan akun Anda untuk melanjutkan!</p>
-      </HeaderModal>
-
       <div className="w-full max-w-md">
         <form>
           {/* Input Email / No Telepon */}

app/components/ui/form-login.tsx

@@ -1,33 +1,23 @@
 // import { EyeIcon, EyeOffIcon } from 'lucide-react'
-import { Button } from '@headlessui/react'
+import { useState, type Dispatch, type SetStateAction } from 'react'
-import { useState } from 'react'
 import { Link } from 'react-router'
 
 import { EyeIcon } from '~/components/icons/eye'
-import { APP } from '~/data/meta'
 
-const FormLogin = () => {
+import { Button } from './button'
+
+type TProperties = {
+  setIsRegisterOpen: Dispatch<SetStateAction<boolean>>
+  setIsLoginOpen: Dispatch<SetStateAction<boolean>>
+}
+
+export const FormLogin = (properties: TProperties) => {
+  const { setIsRegisterOpen, setIsLoginOpen } = properties
   const [showPassword, setShowPassword] = useState(false)
 
   return (
     <div className="flex items-center justify-center">
       <div className="w-full max-w-md">
-        <div className="mb-6 flex justify-center">
-          <Link to="/news">
-            <img
-              src={APP.logo}
-              alt={APP.title}
-              className="h-[80px]"
-            />
-          </Link>
-        </div>
-
-        <div className="mb-4 p-4 text-center">
-          <p className="text-[#565658]">
-            Selamat Datang, silakan daftarkan akun Anda untuk melanjutkan!
-          </p>
-        </div>
-
         <form>
           {/* Input Email / No Telepon */}
           <div className="mb-4">
@@ -96,16 +86,19 @@ const FormLogin = () => {
         {/* Link Daftar */}
         <div className="mt-4 text-center text-sm">
           Belum punya akun?{' '}
-          <Link
+          <Button
-            to="/register"
+            onClick={() => {
+              setIsLoginOpen(false)
+              setIsRegisterOpen(true)
+            }}
             className="font-semibold text-[#2E2F7C]"
+            variant="link"
+            size="fit"
           >
             Daftar Disini
-          </Link>
+          </Button>
         </div>
       </div>
     </div>
   )
 }
-
-export default FormLogin

app/components/ui/form-register.tsx

@@ -1,16 +1,11 @@
 import { useState } from 'react'
 
-import HeaderModal from '~/components/popup/header-modal'
 import { Button } from '~/components/ui/button'
 
-export default function FormRegister() {
+export const FormRegister = () => {
   const [showPassword, setShowPassword] = useState(false)
   return (
     <div className="flex flex-col items-center justify-center">
-      <HeaderModal>
-        <p>Selamat Datang, silakan masukkan data Anda untuk melanjutkan!</p>
-      </HeaderModal>
-
       <div className="w-full max-w-md">
         <form>
           {/* Input Email / No Telepon */}

app/components/ui/form-subscription.tsx

@@ -1,16 +1,8 @@
 import { Button } from '@headlessui/react'
 
-import HeaderModal from '~/components/popup/header-modal'
-
 export default function FormSubscription() {
   return (
     <div className="flex flex-col items-center justify-center">
-      <HeaderModal>
-        <p>
-          Selamat Datang, silakan Pilih Subscription Anda untuk melanjutkan!
-        </p>
-      </HeaderModal>
-
       <div className="w-full max-w-md">
         <form>
           {/* Subscribe*/}

app/layouts/header-top.tsx

@@ -1,13 +1,16 @@
 import { useState } from 'react'
 import { Link } from 'react-router'
 
-import PopupModal from '~/components/popup/modal'
+import { PopupModal } from '~/components/popup/modal'
 import { Button } from '~/components/ui/button'
-import FormLogin from '~/components/ui/form-login'
+import { FormLogin } from '~/components/ui/form-login'
+import { FormRegister } from '~/components/ui/form-register'
 import { APP } from '~/data/meta'
 
 export const HeaderTop = () => {
-  const [isModalOpen, setModalOpen] = useState(false)
+  const [isLoginOpen, setIsLoginOpen] = useState(false)
+  const [isRegisterOpen, setIsRegisterOpen] = useState(false)
+
   return (
     <>
       <div className="flex h-[60px] items-center justify-between bg-white px-5 align-middle sm:h-[100px] sm:gap-[15px] sm:px-[50px] sm:py-[20px]">
@@ -31,14 +34,11 @@ export const HeaderTop = () => {
           <Button
             variant="newsSecondary"
             className="hidden sm:block"
-            onClick={() => setModalOpen(true)}
+            onClick={() => setIsLoginOpen(true)}
           >
             Akun
           </Button>
-          <div
+          <div className="w-[50px] sm:w-[60px]">
-            className="w-[50px] sm:w-[60px]"
-            onClick={() => setModalOpen(true)}
-          >
             <img
               alt="language"
               src="/flags/id.svg"
@@ -49,10 +49,22 @@ export const HeaderTop = () => {
       </div>
 
       <PopupModal
-        isOpen={isModalOpen}
+        isOpen={isLoginOpen}
-        onClose={() => setModalOpen(false)}
+        onClose={() => setIsLoginOpen(false)}
+        description="Selamat Datang, silakan daftarkan akun Anda untuk melanjutkan!"
       >
-        <FormLogin />
+        <FormLogin
+          setIsRegisterOpen={setIsRegisterOpen}
+          setIsLoginOpen={setIsLoginOpen}
+        />
+      </PopupModal>
+
+      <PopupModal
+        isOpen={isRegisterOpen}
+        onClose={() => setIsRegisterOpen(false)}
+        description="Selamat Datang, silakan daftarkan akun Anda untuk melanjutkan!"
+      >
+        <FormRegister />
       </PopupModal>
     </>
   )

app/routes/_layout.auth.tsx

@@ -1,23 +0,0 @@
-import { useState } from 'react'
-
-import PopupModal from '~/components/popup/modal'
-import FormLogin from '~/components/ui/form-login'
-
-const AuthLayout = () => {
-  const [isModalOpen, setModalOpen] = useState(true)
-
-  return (
-    <div className="relative">
-      <div className="flex min-h-screen items-center justify-center bg-gray-100">
-        {/* Modal */}
-        <PopupModal
-          isOpen={isModalOpen}
-          onClose={() => setModalOpen(true)}
-        >
-          <FormLogin />
-        </PopupModal>
-      </div>
-    </div>
-  )
-}
-export default AuthLayout

app/routes/_layout.dashboard.auth.tsx

@@ -0,0 +1,10 @@
+const AuthLayout = () => {
+  return (
+    <div className="relative">
+      <div className="flex min-h-screen items-center justify-center bg-gray-100">
+        Login
+      </div>
+    </div>
+  )
+}
+export default AuthLayout