feat: create component modal, popup and form input

2025-02-21 20:47:15 +07:00
parent 7c4440cc6b
commit 84e49cd335
16 changed files with 521 additions and 78 deletions
@@ -0,0 +1,30 @@
+import type { ReactNode } from 'react'
+
+interface ModalProperties {
+  isOpen: boolean
+  onClose: () => void
+  children: ReactNode
+}
+
+export default function PopupModal({
+  isOpen,
+  onClose,
+  children,
+}: 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}
+        </div>
+      </div>
+    </>
+  )
+}
@@ -0,0 +1,48 @@
+import { Link } from 'react-router'
+
+import { LeftArrow } from '~/components/icons/left-arrow'
+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="mb-4 p-4 text-center">
+          <p className="text-[#565658]">Selamat! Pembayaran anda berhasil!</p>
+          <div className="my-10 flex justify-center">
+            <img
+              src={'/public/images/back-to-home.svg'}
+              alt={APP.title}
+              className="h-[350px]"
+            />
+          </div>
+          <button className="mt-5 w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800">
+            Back to Home
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,48 @@
+import { Link } from 'react-router'
+
+import { LeftArrow } from '~/components/icons/left-arrow'
+import { APP } from '~/data/meta'
+
+export default function PopupSuccesRegister() {
+  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="mb-4 p-4 text-center">
+          <p className="text-[#565658]">Selamat! pendaftaran anda berhasil!</p>
+          <div className="my-10 flex justify-center">
+            <img
+              src={'/public/images/back-to-home.svg'}
+              alt={APP.title}
+              className="h-[350px]"
+            />
+          </div>
+          <button className="mt-5 w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800">
+            Back to Home
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,50 @@
+import { Link } from 'react-router'
+
+import { LeftArrow } from '~/components/icons/left-arrow'
+import { APP } from '~/data/meta'
+
+export default function PopupSuccessResetPass() {
+  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="mb-4 p-4 text-center">
+          <p className="text-[#565658]">
+            Link Reset Password telah dikirmkan ke email anda
+          </p>
+          <div className="my-10 flex justify-center">
+            <img
+              src={'/public/images/back-to-home.svg'}
+              alt={APP.title}
+              className="h-[350px]"
+            />
+          </div>
+          <button className="mt-5 w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800">
+            Back to Home
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}