Add: all the constraints added and error message displayed in UI :)

Shubham-Patel07 · Aug 22, 2024 · 6ff3fe4 · 6ff3fe4
1 parent 9fdeb3e
commit 6ff3fe4
Showing 1 changed file with 18 additions and 0 deletions.
diff --git a/pages/contact/index.js b/pages/contact/index.js
@@ -121,6 +121,24 @@ const Contact = () => {
               </span>
               <BsArrowRight className="-translate-y-[120%] opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-300 absolute text-[22px]" />
             </button>
+            {/* error message */}
+            {error.length > 0 && (
+              <div className="relative w-full px-5 py-2 border border-accent bg-accent/10 opacity-60 hover:opacity-90">
+                {/* Close button */}
+                <button
+                  onClick={() => setError([])}
+                  className="absolute top-2 right-5 text-accent text-xl leading-none hover:text-white transition-colors duration-200"
+                >
+                  &times;
+                </button>
+                {/* Error messages */}
+                {error.map((e, index) => (
+                  <div key={index} className="text-accent">
+                    {e}
+                  </div>
+                ))}
+              </div>
+            )}
           </motion.form>
         </div>
       </div>