generic modal component

src/components/File/NewNote.tsx

@@ -1,31 +1,19 @@
-import React, { useState, useRef, useEffect } from "react";
+import React, { useState } from "react";
+import Modal from "../Generic/Modal";
+// import Modal from './Modal'; // Adjust the import path as necessary
 
 interface NewNoteComponentProps {
-  onFileSelect: (path: string) => void;
   isOpen: boolean;
   onClose: () => void;
+  onFileSelect: (path: string) => void;
 }
 
 const NewNoteComponent: React.FC<NewNoteComponentProps> = ({
-  onFileSelect,
   isOpen,
   onClose,
+  onFileSelect,
 }) => {
   const [fileName, setFileName] = useState<string>("");
-  const modalRef = useRef<HTMLDivElement>(null);
-
-  const handleOffClick = (event: MouseEvent) => {
-    if (modalRef.current && !modalRef.current.contains(event.target as Node)) {
-      onClose();
-    }
-  };
-
-  useEffect(() => {
-    document.addEventListener("mousedown", handleOffClick);
-    return () => {
-      document.removeEventListener("mousedown", handleOffClick);
-    };
-  }, [onClose]);
 
   const sendNewNoteMsg = async () => {
     const notePath = await window.files.joinPath(
@@ -37,38 +25,24 @@ const NewNoteComponent: React.FC<NewNoteComponentProps> = ({
     onFileSelect(notePath);
     onClose(); // Close modal after file creation
   };
-
   const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (e.key === "Enter") {
       sendNewNoteMsg();
     }
   };
 
-  if (!isOpen) {
-    return null;
-  }
-
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
-      <div
-        ref={modalRef}
-        className="bg-white rounded-lg shadow-xl w-full max-w-lg p-6"
-      >
-        <div className="flex justify-between items-center">
-          <h2 className="text-2xl font-semibold">Create New Note</h2>
-          <button
-            onClick={onClose}
-            className="text-gray-600 hover:text-gray-800 cursor-pointer"
-          >
-            <span className="text-3xl">&times;</span>
-          </button>
-        </div>
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <div className="mr-6">
+        <h2 className="text-2xl font-semibold mb-4 text-white">
+          Create New Note
+        </h2>
         <input
           type="text"
-          className="form-input mt-4 block w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:shadow-outline-blue focus:border-blue-300 transition duration-150 ease-in-out"
+          className="form-input block w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:shadow-outline-blue focus:border-blue-300 transition duration-150 ease-in-out"
           value={fileName}
           onChange={(e) => setFileName(e.target.value)}
-          onKeyPress={handleKeyPress}
+          onKeyDown={handleKeyPress}
           placeholder="Note Name"
         />
         <button
@@ -78,7 +52,7 @@ const NewNoteComponent: React.FC<NewNoteComponentProps> = ({
           Create
         </button>
       </div>
-    </div>
+    </Modal>
   );
 };
 

src/components/Generic/Modal.tsx

@@ -0,0 +1,49 @@
+import React, { useRef, useEffect } from "react";
+
+interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  children: React.ReactNode;
+}
+
+const Modal: React.FC<ModalProps> = ({ isOpen, onClose, children }) => {
+  const modalRef = useRef<HTMLDivElement>(null);
+
+  const handleOffClick = (event: MouseEvent) => {
+    if (modalRef.current && !modalRef.current.contains(event.target as Node)) {
+      onClose();
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener("mousedown", handleOffClick);
+    return () => {
+      document.removeEventListener("mousedown", handleOffClick);
+    };
+  }, [onClose]);
+
+  if (!isOpen) {
+    return null;
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
+      <div
+        ref={modalRef}
+        className="bg-gray-800 rounded-lg shadow-xl w-full max-w-lg p-2"
+      >
+        <div className="flex justify-end">
+          <button
+            onClick={onClose}
+            className="text-gray-600 hover:text-gray-800 cursor-pointer"
+          >
+            <span className="text-3xl">&times;</span>
+          </button>
+        </div>
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export default Modal;

src/components/Settings/SettingsModal.tsx

@@ -1,40 +1,29 @@
 import React, { useEffect, useState } from "react";
+import Modal from "../Generic/Modal";
 
 interface ModalProps {
   isOpen: boolean;
   onClose: () => void;
-  // onSaveKey: (key: string) => void;
 }
 
-const SettingsModal: React.FC<ModalProps> = ({
-  isOpen,
-  onClose,
-  // onSaveKey,
-}) => {
+const SettingsModal: React.FC<ModalProps> = ({ isOpen, onClose }) => {
   const [openAIKey, setOpenAIKey] = useState("");
 
   useEffect(() => {
     const key = window.electronStore.getOpenAIAPIKey() || ""; // Fallback to empty string if undefined
     setOpenAIKey(key);
   }, []);
 
-  if (!isOpen) return null;
-
   const handleSave = () => {
-    // onSaveKey(openAIKey);
     window.electronStore.setOpenAIAPIKey(openAIKey);
     onClose();
   };
 
+  if (!isOpen) return null;
+
   return (
-    <div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex justify-center items-center">
-      <div className="bg-gray-800 text-white rounded-lg shadow-xl p-5">
-        <button
-          className="float-right text-gray-400 hover:text-gray-200"
-          onClick={handleSave}
-        >
-          &#10005; {/* This is a simple 'X' close icon */}
-        </button>
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <div className=" text-white rounded-lg p-5">
         <h2 className="text-xl mb-4">OpenAI Key Settings</h2>
         <input
           type="password" // Changed to password type
@@ -50,7 +39,7 @@ const SettingsModal: React.FC<ModalProps> = ({
           Save Key
         </button>
       </div>
-    </div>
+    </Modal>
   );
 };