feat: adj component

app/components/popup/header-modal.tsx

@@ -0,0 +1,44 @@
+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,6 +1,7 @@
+import { Dialog, DialogPanel } from '@headlessui/react'
 import type { ReactNode } from 'react'
 
-interface ModalProperties {
+type ModalProperties = {
   isOpen: boolean
   onClose: () => void
   children: ReactNode
@@ -13,18 +14,22 @@ export default function PopupModal({
 }: ModalProperties) {
   if (!isOpen) return
   return (
-    <>
-      <div className="bg-opacity-50 fixed inset-0 z-50 grid place-items-center bg-gray-300/50">
-        <button
-          onClick={onClose}
-          className="absolute top-5 right-5 z-50 bg-red-500 p-3 text-gray-500 hover:text-gray-800"
-        >
-          ✖
-        </button>
-        <div className="relative rounded-lg bg-white p-6 shadow-lg">
-          {children}
+    <Dialog
+      open={isOpen}
+      as="div"
+      className="relative z-30 focus:outline-none"
+      onClose={onClose}
+    >
+      <div className="fixed inset-0 z-30 w-screen overflow-y-auto backdrop-blur-sm">
+        <div className="flex min-h-full items-center justify-center sm:p-4">
+          <DialogPanel
+            transition
+            className="w-full rounded-xl bg-white p-5 shadow duration-300 ease-out data-[closed]:transform-[scale(95%)] data-[closed]:opacity-0 max-md:min-h-screen max-md:min-w-screen max-sm:p-[50px] sm:max-w-md sm:p-10"
+          >
+            {children}
+          </DialogPanel>
         </div>
       </div>
-    </>
+    </Dialog>
   )
 }

app/components/popup/succes-payment.tsx

@@ -1,48 +1,29 @@
-import { Link } from 'react-router'
+import { Button } from '@headlessui/react'
 
-import { LeftArrow } from '~/components/icons/left-arrow'
+import HeaderModal from '~/components/popup/header-modal'
 import { APP } from '~/data/meta'
 
 export default function PopupSuccessPayment() {
   return (
-    <div className="flex min-h-screen items-center justify-center">
-      <div className="w-full max-w-md p-6">
-        <div className="absolute top-[80px] left-[50px]">
-          <Link
-            to="/#"
-            className="mt-2 h-full py-2"
-          >
-            <LeftArrow
-              width={'70px'}
-              height={'70px'}
-            ></LeftArrow>
-          </Link>
-        </div>
-
-        <div className="mb-6 flex justify-center">
-          <Link to="/news">
-            <img
-              src={APP.logo}
-              alt={APP.title}
-              className="h-[80px]"
-            />
-          </Link>
-        </div>
+    <>
+      <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">
-          <p className="text-[#565658]">Selamat! Pembayaran anda berhasil!</p>
-          <div className="my-10 flex justify-center">
+          <div className="flex justify-center">
             <img
               src={'/public/images/back-to-home.svg'}
               alt={APP.title}
-              className="h-[350px]"
+              className="h-[300px]"
             />
           </div>
-          <button className="mt-5 w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800">
+          <Button className="mt-5 w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800">
             Back to Home
-          </button>
+          </Button>
         </div>
       </div>
-    </div>
+    </>
   )
 }

app/components/popup/succes-register.tsx

@@ -1,3 +1,4 @@
+import { Button } from '@headlessui/react'
 import { Link } from 'react-router'
 
 import { LeftArrow } from '~/components/icons/left-arrow'
@@ -38,9 +39,9 @@ export default function PopupSuccesRegister() {
               className="h-[350px]"
             />
           </div>
-          <button className="mt-5 w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800">
+          <Button className="mt-5 w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800">
             Back to Home
-          </button>
+          </Button>
         </div>
       </div>
     </div>

app/components/popup/succes-reset-pass.tsx

@@ -1,3 +1,4 @@
+import { Button } from '@headlessui/react'
 import { Link } from 'react-router'
 
 import { LeftArrow } from '~/components/icons/left-arrow'
@@ -40,9 +41,9 @@ export default function PopupSuccessResetPass() {
               className="h-[350px]"
             />
           </div>
-          <button className="mt-5 w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800">
+          <Button className="mt-5 w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800">
             Back to Home
-          </button>
+          </Button>
         </div>
       </div>
     </div>