| 1 | "use client"; |
| 2 | import { useCallback, useRef, useEffect, ReactNode, MouseEvent } from "react"; |
| 3 | import { useRouter } |
| 4 | |
| 5 | export default function Modal |
| 6 | const overlay = |
| 7 | const wrapper = |
| 8 | const router = |
| 9 | |
| 10 | const onDismiss = |
| 11 | router.back(); |
| 12 | }, [router]); |
| 13 | |
| 14 | const onClick = |
| 15 | (e: any |
| 16 | if (e.target |
| 17 | if (onDismiss) onDismiss |
| 18 | } |
| 19 | }, |
| 20 | [onDismiss, overlay, |
| 21 | ); |
| 22 | |
| 23 | const onKeyDown = |
| 24 | (e: any |
| 25 | if (e.key |
| 26 | }, |
| 27 | [onDismiss] |
| 28 | ); |
| 29 | |
| 30 | useEffect(() => |
| 31 | document.addEventListener("keydown |
| 32 | return () => |
| 33 | }, [onKeyDown]); |
| 34 | |
| 35 | return ( |
| 36 | <div |
| 37 | ref={overlay} |
| 38 | className="fixed z-10 left-0 right-0 top-0 bottom-0 mx-auto bg-black/60" |
| 39 | onClick={onClick} |
| 40 | > |
| 41 | <div |
| 42 | ref={wrapper} |
| 43 | className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full sm:w-10/12 md:w-8/12 lg:w-1/2 p-6" |
| 44 | > |
| 45 | {children} |
| 46 | </div> |
| 47 | </div> |
| 48 | ); |
| 49 | } |