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