added key events to popup component

app/components/Popup/index.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React from "react";
+import React, { useEffect } from "react";
 
 interface PopupProps extends React.HTMLAttributes<HTMLDivElement> {
   show?: boolean;
@@ -14,8 +14,31 @@ const Popup: React.FC<PopupProps> = ({
   show = false,
   title,
   children,
+  onClickClose,
+  onClickOk,
   ...props
 }) => {
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape" && onClickClose) {
+        onClickClose(event as unknown as React.MouseEvent<HTMLButtonElement>);
+      }
+      if (event.key === "Enter") {
+        if (onClickOk) {
+          onClickOk(event as unknown as React.MouseEvent<HTMLButtonElement>);
+        }
+      }
+    };
+
+    if (show) {
+      window.addEventListener("keydown", handleKeyDown);
+    }
+
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [show, onClickClose]);
+
   if (!show) return null;
 
   return (
@@ -30,13 +53,10 @@ const Popup: React.FC<PopupProps> = ({
           )}
           {children}
           <div className="flex justify-between">
-            <button onClick={props.onClickClose} className="btn btn-sm">
+            <button onClick={onClickClose} className="btn btn-sm">
               Close
             </button>
-            <button
-              onClick={props.onClickOk}
-              className="btn btn-sm btn-success"
-            >
+            <button onClick={onClickOk} className="btn btn-sm btn-success">
               Ok
             </button>
           </div>