Added error borders

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

@@ -1,6 +1,6 @@
 import React, { useRef } from "react";
-import Icons from "../../Icons";
 import { Link } from "react-router-dom";
+import Icons from "../../Icons";
 
 export default function InputCom({
   label,
@@ -22,7 +22,7 @@ export default function InputCom({
   spanTag,
   inputBg,
   direction,
-  errorBorder
+  errorBorder,
 }) {
   const inputRef = useRef(null);
   // Entry Validation
@@ -41,8 +41,8 @@ export default function InputCom({
   // for Patterns
   const inputPatterns = () => {
     const inputConfig = inputConfigs[inputRef?.current?.name]?.pattern;
-    return inputConfig || ""
-  }
+    return inputConfig || "";
+  };
   return (
     <div className={`input-com ${parentClass}`}>
       <div className={`flex items-center justify-between mb-2.5 ${labelClass}`}>
@@ -52,16 +52,16 @@ export default function InputCom({
             htmlFor={name}
           >
             {label}
-            {spanTag && 
-              spanTag == '*' ?
+            {spanTag && spanTag == "*" ? (
               <span className="text-red-700 text-sm tracking-wide">
-                {' '}{spanTag}
+                {" "}
+                {spanTag}
               </span>
-              :
+            ) : (
               <span className="text-green-700 text-sm tracking-wide">
                 {spanTag}
               </span>
-            }
+            )}
           </label>
         )}
         {forgotPassword && (
@@ -74,7 +74,11 @@ export default function InputCom({
         )}
       </div>
       <div
-        className={`input-wrapper border ${errorBorder ? "border-red-500 border-[0.5px] animate-shake" : "border border-[#f5f8fa] dark:border-[#5e6278]"} w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base ${inputClass}`}
+        className={`input-wrapper border ${
+          errorBorder
+            ? "border-[#ff0a0a63] border-[2px] shadow-red-500 animate-shake"
+            : "border border-[#f5f8fa] dark:border-[#5e6278]"
+        } w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base ${inputClass}`}
       >
         <input
           placeholder={placeholder}
@@ -96,11 +100,9 @@ export default function InputCom({
         />
         {iconName && (
           <div className="absolute right-6 bottom-[10px] z-10 flex gap-2">
-            {
-              iconName.split(' ').map((item, index)=>(
-                <Icons key={index} name={item} />
-              ))
-            }
+            {iconName.split(" ").map((item, index) => (
+              <Icons key={index} name={item} />
+            ))}
           </div>
         )}
         {passIcon && (
@@ -126,6 +128,7 @@ const inputConfigs = {
   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]+" },
+  description: { minLength: 5, maxLength: 250 },
 };
 
 /* Numbers Only: <input type="text" pattern="[0-9]*" /> strictly numbers