diff options
| author | Factiven <[email protected]> | 2023-04-11 23:23:29 +0700 |
|---|---|---|
| committer | Factiven <[email protected]> | 2023-04-11 23:23:29 +0700 |
| commit | 1fcdd9f7d859b925bf92265f441655d5522e351c (patch) | |
| tree | 86391522f6fcc70d105f7e796a9f91d132ee4a29 /components/modal.js | |
| parent | Initial commit (diff) | |
| download | moopa-1fcdd9f7d859b925bf92265f441655d5522e351c.tar.xz moopa-1fcdd9f7d859b925bf92265f441655d5522e351c.zip | |
initial commit
Diffstat (limited to 'components/modal.js')
| -rw-r--r-- | components/modal.js | 19 |
1 files changed, 19 insertions, 0 deletions
diff --git a/components/modal.js b/components/modal.js new file mode 100644 index 0000000..0a9d349 --- /dev/null +++ b/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> + ); +} |