feat: use generic Modal with render props

frontend/src/preferences/APIKeyModal.tsx

@@ -3,6 +3,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { ActiveState } from '../models/misc';
 import { selectApiKey, setApiKey } from './preferenceSlice';
 import { useOutsideAlerter } from './../hooks';
+import Modal from '../Modal';
 
 export default function APIKeyModal({
   modalState,
@@ -49,53 +50,35 @@ export default function APIKeyModal({
   }
 
   return (
-    <div
-      className={`${
-        modalState === 'ACTIVE' ? 'visible' : 'hidden'
-      } absolute z-30  h-screen w-screen  bg-gray-alpha`}
-    >
-      <article
-        ref={modalRef}
-        className="mx-auto mt-24 flex w-[90vw] max-w-lg  flex-col gap-4 rounded-lg bg-white p-6 shadow-lg"
-      >
-        <p className="text-xl text-jet">OpenAI API Key</p>
-        <p className="text-md leading-6 text-gray-500">
-          Before you can start using DocsGPT we need you to provide an API key
-          for llm. Currently, we support only OpenAI but soon many more. You can
-          find it here.
-        </p>
-        <input
-          type="text"
-          className="h-10 w-full border-b-2 border-jet focus:outline-none"
-          value={key}
-          maxLength={100}
-          placeholder="API Key"
-          onChange={(e) => setKey(e.target.value)}
-        />
-        <div className="flex flex-row-reverse">
-          <div>
-            <button
-              onClick={() => handleSubmit()}
-              className="ml-auto h-10 w-20 rounded-lg bg-violet-800 text-white transition-all hover:bg-violet-700"
-            >
-              Save
-            </button>
-            {isCancellable && (
-              <button
-                onClick={() => handleCancel()}
-                className="ml-5 h-10 w-20 rounded-lg border border-violet-700 bg-white text-violet-800 transition-all hover:bg-violet-700 hover:text-white"
-              >
-                Cancel
-              </button>
-            )}
-          </div>
-          {isError && (
-            <p className="mr-auto text-sm text-red-500">
-              Please enter a valid API key
+    <Modal
+      handleCancel={handleCancel}
+      isError={isError}
+      modalState={modalState}
+      isCancellable={isCancellable}
+      handleSubmit={handleSubmit}
+      render={() => {
+        return (
+          <article
+            ref={modalRef}
+            className="mx-auto mt-24 flex w-[90vw] max-w-lg  flex-col gap-4 rounded-lg bg-white p-6 shadow-lg"
+          >
+            <p className="text-xl text-jet">OpenAI API Key</p>
+            <p className="text-md leading-6 text-gray-500">
+              Before you can start using DocsGPT we need you to provide an API
+              key for llm. Currently, we support only OpenAI but soon many more.
+              You can find it here.
             </p>
-          )}
-        </div>
-      </article>
-    </div>
+            <input
+              type="text"
+              className="h-10 w-full border-b-2 border-jet focus:outline-none"
+              value={key}
+              maxLength={100}
+              placeholder="API Key"
+              onChange={(e) => setKey(e.target.value)}
+            />
+          </article>
+        );
+      }}
+    />
   );
 }