44 lines
1.1 KiB
TypeScript
44 lines
1.1 KiB
TypeScript
"use client"
|
|
import { useCallback, useLayoutEffect } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
|
|
import { useHandleKeyPress } from "@/hooks/useHandleKeyPress";
|
|
|
|
import styles from "./overlay.module.css"
|
|
|
|
export default function Overlay({ children }: React.PropsWithChildren) {
|
|
const router = useRouter()
|
|
|
|
const handleOnClose = useCallback(() => {
|
|
return router.back()
|
|
}, [router])
|
|
|
|
const handleOnEscape = useCallback((evt: KeyboardEvent) => {
|
|
if (evt.code === "Escape") {
|
|
handleOnClose()
|
|
}
|
|
}, [handleOnClose])
|
|
|
|
useHandleKeyPress(handleOnEscape)
|
|
|
|
useLayoutEffect(() => {
|
|
// Get original body overflow
|
|
const originalStyle = window.getComputedStyle(document.body).overflow;
|
|
// Prevent scrolling on mount
|
|
document.body.style.overflow = 'hidden';
|
|
// Re-enable scrolling when component unmounts
|
|
return () => {
|
|
document.body.style.overflow = originalStyle;
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<div
|
|
className={styles.overlay}
|
|
onClick={handleOnClose}
|
|
role="button"
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
}; |