diff options
| author | Factiven <[email protected]> | 2023-04-14 00:07:02 +0700 |
|---|---|---|
| committer | Factiven <[email protected]> | 2023-04-14 00:07:02 +0700 |
| commit | 482b1c8db5cfeaa20d75ce92fcb10f3ca8433633 (patch) | |
| tree | f0c12d3acb6bd8ce43e63e01527c97a62dba7e9c /pages/components/modal.js | |
| parent | Update index.js (diff) | |
| download | moopa-482b1c8db5cfeaa20d75ce92fcb10f3ca8433633.tar.xz moopa-482b1c8db5cfeaa20d75ce92fcb10f3ca8433633.zip | |
Update 5th
Diffstat (limited to 'pages/components/modal.js')
| -rw-r--r-- | pages/components/modal.js | 19 |
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> + ); +} |