aboutsummaryrefslogtreecommitdiff
path: root/pages/components/modal.js
diff options
context:
space:
mode:
authorFactiven <[email protected]>2023-04-14 00:07:02 +0700
committerFactiven <[email protected]>2023-04-14 00:07:02 +0700
commit482b1c8db5cfeaa20d75ce92fcb10f3ca8433633 (patch)
treef0c12d3acb6bd8ce43e63e01527c97a62dba7e9c /pages/components/modal.js
parentUpdate index.js (diff)
downloadmoopa-482b1c8db5cfeaa20d75ce92fcb10f3ca8433633.tar.xz
moopa-482b1c8db5cfeaa20d75ce92fcb10f3ca8433633.zip
Update 5th
Diffstat (limited to 'pages/components/modal.js')
-rw-r--r--pages/components/modal.js19
1 files changed, 19 insertions, 0 deletions
diff --git a/pages/components/modal.js b/pages/components/modal.js
new file mode 100644
index 0000000..0a9d349
--- /dev/null
+++ b/pages/components/modal.js
@@ -0,0 +1,19 @@
+export default function Modal({ open, onClose, children }) {
+ return (
+ <div
+ onClick={onClose}
+ className={`fixed z-50 inset-0 flex justify-center items-center transition-colors ${
+ open ? "visible bg-black bg-opacity-50" : "invisible"
+ }`}
+ >
+ <div
+ onClick={(e) => e.stopPropagation()}
+ className={`shadow rounded-xl p-6 transition-all ${
+ open ? "scale-125 opacity-100" : "scale-100 opacity-0"
+ }`}
+ >
+ {children}
+ </div>
+ </div>
+ );
+}