Refactored LockerMaintenance.jsx to use Form Components

src/pages/LockerMaintenance.jsx

@@ -3,8 +3,10 @@ import { useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import FormBox from "../components/FormBox";
 import Button from "../components/Button";
-import { motion, AnimatePresence } from "motion/react";
+import FormField from "../components/FormField";
-import clsx from "clsx";
+import FormInput from "../components/FormInput";
+import FormSelect from "../components/FormSelect";
+import FieldsWrapper from "../components/FieldsWrapper";
 
 function LockerMaintenance() {
   const navigate = useNavigate();
@@ -19,48 +21,44 @@ function LockerMaintenance() {
     navigate(operation.value);
   };
 
+  const formFields = [
+    {
+      name: "value",
+      label: t("operation"),
+      options: [
+        { label: t("status"), value: "status" },
+        { label: t("keySwap"), value: "key-swap" },
+      ],
+      type: "select",
+    },
+  ];
+
+  const renderField = (field) => {
+    const commonProps = {
+      value: operation[field.name],
+      onChange: (e) => {
+        const newValues = { ...operation };
+        newValues[field.name] = e.target.value;
+        newValues[`${field.name}Valid`] = true;
+        setOperation(newValues);
+      },
+    };
+    const options = field.options;
+    return (
+      <FormField label={field.label}>
+        {field.type === "input" ? (
+          <FormInput props={commonProps} />
+        ) : (
+          <FormSelect props={commonProps} options={options} />
+        )}
+      </FormField>
+    );
+  };
+
   return (
     <div>
       <FormBox title={t("cabinetMaintenance")}>
-        <div className="p-2 pt-7">
+        <FieldsWrapper>{formFields.map(renderField)}</FieldsWrapper>
-          <div className="flex">
-            <label className="mr-4 text-lg text-black dark:text-primary-dark w-[10%]">
-              {t("operation")}
-            </label>
-            <div className="w-full">
-              <select
-                className={clsx(
-                  "w-1/5 h-10 px-2 rounded-full dark:bg-grey dark:text-primary-dark border-2 focus:outline-grey border-grey",
-                  !operation.valid && "border-error"
-                )}
-                onChange={(e) =>
-                  setOperation({ value: e.target.value, valid: true })
-                }
-                defaultValue={operation.value}
-                value={operation.value}
-              >
-                <option value="" disabled>
-                  {t("select")}
-                </option>
-                <option value="status">{t("changeStatus")}</option>
-                <option value="key-swap">{t("keySwap")}</option>
-              </select>
-              <AnimatePresence initial={false}>
-                {!operation.valid && (
-                  <motion.div
-                    className="w-1/5 text-sm text-error ml-3 pt-1"
-                    initial={{ opacity: 0, scale: 0 }}
-                    animate={{ opacity: 1, scale: 1 }}
-                    exit={{ opacity: 0, scale: 0 }}
-                    key="cabinetIdError"
-                  >
-                    Invalid Operation
-                  </motion.div>
-                )}
-              </AnimatePresence>
-            </div>
-          </div>
-        </div>
         <Button text={t("next")} onClick={(e) => handleNext(e)} />
       </FormBox>
     </div>