refactor: updated create service modal to use `Tabs` and `Modal` components

services/frontend/src/components/modals/docker-compose/service/Create.tsx

@@ -14,10 +14,12 @@ import Build from "./Build";
 import { styled } from "@mui/joy";
 import Environment from "./Environment";
 import Deploy from "./Deploy";
-import { classNames } from "../../../../utils/styles";
 import { toaster } from "../../../../utils";
 import { reportErrorsAndSubmit } from "../../../../utils/forms";
 import { ScrollView } from "../../../ScrollView";
+import Modal from "../../../Modal";
+import Tabs from "../../../Tabs";
+import Tab from "../../../Tab";
 
 interface IModalServiceProps {
   onHide: CallbackFunction;
@@ -51,91 +53,47 @@ const ModalServiceCreate = (props: IModalServiceProps) => {
   const initialValues = useMemo(() => getInitialValues(), []);
 
   return (
-    <div className="fixed z-50 inset-0 overflow-y-auto">
+    <Modal onHide={onHide} title="Add service">
-      <div className="justify-center items-center flex overflow-x-hidden overflow-y-auto fixed inset-0 outline-none focus:outline-none">
+      <Formik
-        <div
+        initialValues={initialValues}
-          onClick={onHide}
+        enableReinitialize={true}
-          className="opacity-25 fixed inset-0 z-40 bg-black"
+        onSubmit={handleCreate}
-        ></div>
+        validationSchema={validationSchema}
-        <div className="relative w-auto my-6 mx-auto max-w-5xl z-50">
+      >
-          <div className="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
+        {(formik) => (
-            <div className="flex items-center justify-between px-4 py-3 border-b border-solid border-blueGray-200 rounded-t">
+          <FormContainer>
-              <h3 className="text-sm font-semibold">Add service</h3>
+            <div>
+              <Tabs value={openTab} onChange={setOpenTab}>
+                {tabs.map((tab) => (
+                  <Tab key={tab.name} value={tab.name} title={tab.name} />
+                ))}
+              </Tabs>
+
+              <ScrollView
+                height="500px"
+                className="relative px-4 py-3 flex-auto"
+              >
+                {openTab === "General" && <General />}
+                {openTab === "Environment" && <Environment />}
+                {openTab === "Data" && <Data />}
+                {openTab === "Build" && <Build />}
+                {openTab === "Deploy" && <Deploy />}
+              </ScrollView>
+            </div>
+
+            <div className="flex items-center justify-end px-4 py-3 border-t border-solid border-blueGray-200 rounded-b">
               <button
-                className="p-1 ml-auto text-black float-right outline-none focus:outline-none"
+                className="btn-util"
-                onClick={onHide}
+                type="button"
+                onClick={reportErrorsAndSubmit(formik)}
               >
-                <span className="block outline-none focus:outline-none">
+                Add
-                  <XIcon className="w-4" />
-                </span>
               </button>
             </div>
-
+          </FormContainer>
-            <Formik
+        )}
-              initialValues={initialValues}
+      </Formik>
-              enableReinitialize={true}
+    </Modal>
-              onSubmit={handleCreate}
-              validationSchema={validationSchema}
-            >
-              {(formik) => (
-                <FormContainer>
-                  <div>
-                    <div className="border-b border-gray-200 px-4 md:px-8">
-                      <nav
-                        className="-mb-px flex space-x-4 md:space-x-8"
-                        aria-label="Tabs"
-                      >
-                        {tabs.map((tab) => (
-                          <a
-                            key={tab.name}
-                            href={tab.href}
-                            className={classNames(
-                              tab.name === openTab
-                                ? "border-indigo-500 text-indigo-600"
-                                : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300",
-                              "whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm",
-                              tab.hidden ? "hidden" : ""
-                            )}
-                            aria-current={tab.current ? "page" : undefined}
-                            onClick={(e) => {
-                              e.preventDefault();
-                              setOpenTab(tab.name);
-                            }}
-                          >
-                            {tab.name}
-                          </a>
-                        ))}
-                      </nav>
-                    </div>
-
-                    <ScrollView
-                      height="500px"
-                      className="relative px-4 py-3 flex-auto"
-                    >
-                      {openTab === "General" && <General />}
-                      {openTab === "Environment" && <Environment />}
-                      {openTab === "Data" && <Data />}
-                      {openTab === "Build" && <Build />}
-                      {openTab === "Deploy" && <Deploy />}
-                    </ScrollView>
-                  </div>
-
-                  <div className="flex items-center justify-end px-4 py-3 border-t border-solid border-blueGray-200 rounded-b">
-                    <button
-                      className="btn-util"
-                      type="button"
-                      onClick={reportErrorsAndSubmit(formik)}
-                    >
-                      Add
-                    </button>
-                  </div>
-                </FormContainer>
-              )}
-            </Formik>
-          </div>
-        </div>
-      </div>
-    </div>
   );
 };