From 03c4988ff125b3c4900664feac18f05ef276c281 Mon Sep 17 00:00:00 2001
From: Md Asif <md.asif5@tcs.com>
Date: Tue, 24 Dec 2024 01:06:10 +0530
Subject: [PATCH] refactor: streamline layout and error handling in
 CabinetCreation component

---
 src/pages/CabinetCreation.jsx | 182 +++++++++++++++++-----------------
 1 file changed, 89 insertions(+), 93 deletions(-)

diff --git a/src/pages/CabinetCreation.jsx b/src/pages/CabinetCreation.jsx
index 853a780..5245fbb 100644
--- a/src/pages/CabinetCreation.jsx
+++ b/src/pages/CabinetCreation.jsx
@@ -36,103 +36,99 @@ function CabinetCreation() {
     });
   };
   return (
-    <motion.div className="w-full h-fit" initial={{ scale: 0.9 }} animate={{ scale: 1 }} exit={{ scale: 0 }}>
-      <FormBox title={t("cabinetCreation")}>
-        <div className="p-2 pt-7 flex flex-col gap-4">
-          <div className="flex">
-            <label className="mr-4 text-lg text-black dark:text-primary-dark w-[15%]">
-              {t("cabinetId")}
-            </label>
-            <div className="w-full">
-              <input
-                value={cabinetId.id}
-                className={clsx(
-                  "w-1/5 h-10 px-2 rounded-full dark:bg-white dark:text-grey border-2 border-grey text-grey focus:outline-grey",
-                  !cabinetId.valid && "border-error"
-                )}
-                onChange={(e) =>
-                  setCabinetId({
-                    id: e.target.value.toUpperCase(),
-                    valid: true,
-                  })
-                }
-                type="text"
-                maxLength={6}
-              />
-              <AnimatePresence initial={false}>
-                {!cabinetId.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 Cabinet Id
-                  </motion.div>
-                )}
-              </AnimatePresence>
-            </div>
-          </div>
-          <div className="flex">
-            <label className="mr-4 text-lg text-black dark:text-primary-dark w-[15%]">
-              {t("cabinetKeyId")}
-            </label>
-            <div className="w-full">
-              <input
-                value={cabinetKeyId.id}
-                className={clsx(
-                  "w-1/5 h-10 px-2 rounded-full dark:bg-white dark:text-grey border-2 border-grey text-grey focus:outline-grey",
-                  !cabinetKeyId.valid && "border-error"
-                )}
-                onChange={(e) =>
-                  setCabinetKeyId({
-                    id: e.target.value.toUpperCase(),
-                    valid: true,
-                  })
-                }
-                type="text"
-                maxLength={6}
-              />
-              {!cabinetKeyId.valid && (
-                <div className="text-sm text-error ml-3 pt-1">
-                  Invalid Key Id
-                </div>
+    <FormBox title={t("cabinetCreation")}>
+      <div className="p-2 pt-7 flex flex-col gap-4">
+        <div className="flex">
+          <label className="mr-4 text-lg text-black dark:text-primary-dark w-[15%]">
+            {t("cabinetId")}
+          </label>
+          <div className="w-full">
+            <input
+              value={cabinetId.id}
+              className={clsx(
+                "w-1/5 h-10 px-2 rounded-full dark:bg-white dark:text-grey border-2 border-grey text-grey focus:outline-grey",
+                !cabinetId.valid && "border-error"
               )}
-            </div>
-          </div>
-          <div className="flex">
-            <label className="mr-4 text-lg text-black dark:text-primary-dark w-[15%]">
-              {t("noOfLockers")}
-            </label>
-            <div className="w-full">
-              <input
-                value={noOfLockers.number}
-                className={clsx(
-                  "w-1/5 h-10 px-2 rounded-full dark:bg-white dark:text-grey border-2 border-grey text-grey focus:outline-grey",
-                  !noOfLockers.valid && "border-error"
-                )}
-                onChange={(e) =>
-                  setNoOfLockers({ number: e.target.value, valid: true })
-                }
-                type="number"
-              />
-              {!noOfLockers.valid && (
-                <div className="text-sm text-error ml-3 pt-1">
-                  Invalid Number of Lockers
-                </div>
+              onChange={(e) =>
+                setCabinetId({
+                  id: e.target.value.toUpperCase(),
+                  valid: true,
+                })
+              }
+              type="text"
+              maxLength={6}
+            />
+            <AnimatePresence initial={false}>
+              {!cabinetId.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 Cabinet Id
+                </motion.div>
               )}
-            </div>
+            </AnimatePresence>
           </div>
         </div>
-        <Button
-          text={t("next")}
-          onClick={(e) => {
-            handleNext(e);
-          }}
-        />
-      </FormBox>
-    </motion.div>
+        <div className="flex">
+          <label className="mr-4 text-lg text-black dark:text-primary-dark w-[15%]">
+            {t("cabinetKeyId")}
+          </label>
+          <div className="w-full">
+            <input
+              value={cabinetKeyId.id}
+              className={clsx(
+                "w-1/5 h-10 px-2 rounded-full dark:bg-white dark:text-grey border-2 border-grey text-grey focus:outline-grey",
+                !cabinetKeyId.valid && "border-error"
+              )}
+              onChange={(e) =>
+                setCabinetKeyId({
+                  id: e.target.value.toUpperCase(),
+                  valid: true,
+                })
+              }
+              type="text"
+              maxLength={6}
+            />
+            {!cabinetKeyId.valid && (
+              <div className="text-sm text-error ml-3 pt-1">Invalid Key Id</div>
+            )}
+          </div>
+        </div>
+        <div className="flex">
+          <label className="mr-4 text-lg text-black dark:text-primary-dark w-[15%]">
+            {t("noOfLockers")}
+          </label>
+          <div className="w-full">
+            <input
+              value={noOfLockers.number}
+              className={clsx(
+                "w-1/5 h-10 px-2 rounded-full dark:bg-white dark:text-grey border-2 border-grey text-grey focus:outline-grey",
+                !noOfLockers.valid && "border-error"
+              )}
+              onChange={(e) =>
+                setNoOfLockers({ number: e.target.value, valid: true })
+              }
+              type="number"
+            />
+            {!noOfLockers.valid && (
+              <div className="text-sm text-error ml-3 pt-1">
+                Invalid Number of Lockers
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+      <Button
+        text={t("next")}
+        onClick={(e) => {
+          handleNext(e);
+        }}
+      />
+    </FormBox>
   );
 }