close modal on escape key press

package.json

@@ -3,7 +3,7 @@
   "version": "2.0.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev --turbo",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"

src/components/DiscDetail.tsx

@@ -7,6 +7,7 @@ import { DiscContext } from "@components";
 import { hexToRgba } from "@util";
 
 import type { DiscDetailProps } from "@types";
+
 export const DiscDetail = ({ name_slug }: DiscDetailProps) => {
 	const { discs } = useContext(DiscContext);
 	const disc = discs.find(disc => disc.name_slug === name_slug);

src/components/DiscModal.tsx

@@ -2,15 +2,18 @@
 
 import { useRouter } from "next/navigation";
 
+import { useKeyPress } from "@hooks";
 import { Modal as MuiModal } from "@mui/material";
 
 import type { ModalProps } from "@types";
-
 export function DiscModal({ children }: ModalProps) {
 	const router = useRouter();
 	const onClose = () => router.back();
+
+	useKeyPress("Escape", onClose);
+
 	return (
-		<MuiModal open={true} className="mui-fixed">
+		<MuiModal open={true} className="mui-fixed" disableEscapeKeyDown>
 			<div className="modal" onClick={onClose}>
 				{children}
 			</div>

src/hooks/index.ts

@@ -0,0 +1 @@
+export * from "./useKeyPress";

src/hooks/useKeyPress.ts

@@ -0,0 +1,13 @@
+"use client";
+
+import { useEffect } from "react";
+
+export const useKeyPress = (key: string, action: () => void) => {
+	useEffect(() => {
+		const onKeyDown = (e: KeyboardEvent) => {
+			if (e.key === key) action();
+		};
+		window.addEventListener("keydown", onKeyDown);
+		return () => window.removeEventListener("keydown", onKeyDown);
+	}, [key, action]);
+};