changed layout

src/components/Helpers/Inputs/InputCom/index.jsx

@@ -20,119 +20,28 @@ export default function InputCom({
   disable,
   blurHandler,
   spanTag,
-  inputBg
+  inputBg,
+  direction
 }) {
   const inputRef = useRef(null);
   // Entry Validation
   // for Min Length:
   const minLengthValidation = () => {
-    if (inputRef && inputRef?.current && inputRef?.current?.name === "email") {
-      return 7;
-    } else if (
-      inputRef &&
-      inputRef?.current &&
-      inputRef?.current?.name === "first_name"
-    ) {
-      return 3;
-    } else if (
-      inputRef &&
-      inputRef?.current &&
-      inputRef?.current?.name === "last_name"
-    ) {
-      return 3;
-    } else if (
-      inputRef &&
-      inputRef?.current &&
-      inputRef?.current?.name === "address"
-    ) {
-      return 5;
-    } else if (
-      inputRef &&
-      inputRef?.current &&
-      inputRef?.current?.name === "password"
-    ) {
-      return 8;
-    } else if (
-      inputRef &&
-      inputRef?.current &&
-      inputRef?.current?.name === "state"
-    ) {
-      return 3;
-    } else if (
-      inputRef &&
-      inputRef?.current &&
-      inputRef?.current?.name === "province"
-    ) {
-      return 3;
-    } else if (
-      inputRef &&
-      inputRef?.current &&
-      inputRef?.current?.name === "city"
-    ) {
-      return 3;
-    } else if (
-      inputRef &&
-      inputRef?.current &&
-      inputRef?.current?.name === "amount"
-    ) {
-      return 1;
-    }
+    const inputConfig = inputConfigs[inputRef?.current?.name]?.minLength;
+    return inputConfig || 0;
   };
 
   // for MaxLength
   const maxLengthValidation = () => {
-    if (inputRef && inputRef?.current && inputRef?.current?.name === "email") {
-      return 35;
-    } else if (
-      inputRef &&
-      inputRef?.current &&
-      inputRef?.current?.name === "first_name"
-    ) {
-      return 25;
-    } else if (
-      inputRef &&
-      inputRef?.current &&
-      inputRef?.current?.name === "last_name"
-    ) {
-      return 25;
-    } else if (
-      inputRef &&
-      inputRef?.current &&
-      inputRef?.current?.name === "address"
-    ) {
-      return 49;
-    } else if (
-      inputRef &&
-      inputRef?.current &&
-      inputRef?.current?.name === "password"
-    ) {
-      return 15;
-    } else if (
-      inputRef &&
-      inputRef?.current &&
-      inputRef?.current?.name === "state"
-    ) {
-      return 25;
-    } else if (
-      inputRef &&
-      inputRef?.current &&
-      inputRef?.current?.name === "province"
-    ) {
-      return 25;
-    } else if (
-      inputRef &&
-      inputRef?.current &&
-      inputRef?.current?.name === "city"
-    ) {
-      return 25;
-    } else if (
-      inputRef &&
-      inputRef?.current &&
-      inputRef?.current?.name === "amount"
-    ) {
-      return 9;
-    }
+    const inputConfig = inputConfigs[inputRef?.current?.name]?.maxLength;
+    return inputConfig || 30;
   };
+
+  // for Patterns
+  const inputPatterns = () => {
+    const inputConfig = inputConfigs[inputRef?.current?.name]?.pattern;
+    return inputConfig || ""
+  }
   return (
     <div className={`input-com ${parentClass}`}>
       <div className={`flex items-center justify-between mb-2.5 ${labelClass}`}>
@@ -140,9 +49,13 @@ export default function InputCom({
           <label
             className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"
             htmlFor={name}
-            >
+          >
             {label}
-            {spanTag && <span className="text-green-700 text-sm tracking-wide">{spanTag}</span>}
+            {spanTag && (
+              <span className="text-green-700 text-sm tracking-wide">
+                {spanTag}
+              </span>
+            )}
           </label>
         )}
         {forgotPassword && (
@@ -161,15 +74,19 @@ export default function InputCom({
           placeholder={placeholder}
           value={value}
           onChange={inputHandler}
-          className={`input-field placeholder:text-base text-bese px-12 text-dark-gray w-full h-full ${inputBg ? inputBg: 'bg-[#FAFAFA]'} dark:bg-[#11131F] focus:ring-0 focus:outline-none ${fieldClass}`}
+          className={`input-field placeholder:text-base text-dark-gray w-full h-full ${
+            inputBg ? inputBg : "bg-[#FAFAFA]"
+          } dark:bg-[#11131F] focus:ring-0 focus:outline-none ${fieldClass}`}
           type={type}
           id={name}
           name={name}
           minLength={minLengthValidation()}
           maxLength={maxLengthValidation()}
+          pattern={() => inputPatterns}
           ref={inputRef}
           readOnly={disable}
           onBlur={blurHandler}
+          dir={direction}
         />
         {iconName && (
           <div className="absolute right-6 bottom-[10px] z-10">
@@ -188,3 +105,21 @@ export default function InputCom({
     </div>
   );
 }
+
+const inputConfigs = {
+  email: { minLength: 7, maxLength: 30 },
+  first_name: { minLength: 3, maxLength: 25, pattern: "[a-zA-Z]+" },
+  last_name: { minLength: 3, maxLength: 25, pattern: "[a-zA-Z]+" },
+  address: { minLength: 5, maxLength: 49, pattern: "[a-zA-Z0-9]+" },
+  password: { minLength: 8, maxLength: 15, pattern: ".{8,}" },
+  state: { minLength: 3, maxLength: 25, pattern: "[a-zA-Z]+" },
+  province: { minLength: 3, maxLength: 25, pattern: "[a-zA-Z]+" },
+  city: { minLength: 3, maxLength: 25, pattern: "[a-zA-Z]+" },
+  amount: { minLength: 1, maxLength: 9, pattern: "[0-9]+" },
+};
+
+/* Numbers Only: <input type="text" pattern="[0-9]*" /> strictly numbers
+Alphabets Only: <input type="text" pattern="[a-zA-Z]+" /> strictly alphabets
+Alphanumeric: <input type="text" pattern="[a-zA-Z0-9]+" /> mix
+Password: <input type="text" pattern=".{8,}" /> a minimum of 8 characters 
+*/