feat: Added clear field functionality and searchEmpty check

In this update, we've added the ability to clear the search field in the Hero component and introduced a check using the `searchEmpty` variable. Key additions include:

- The creation of a handleClear function to reset the form and clear error messages when the "Clear" button is clicked.
- The addition of a "Clear" icon component for the clear button.
- The use of a form reference (formRef) for easier access to form elements.
- Conditional display of the "Clear" button only when the search field is not empty and `searchEmpty` is false.

This enhancement improves the user experience by allowing users to reset the search field more conveniently while also considering the `searchEmpty` variable. A new branch has also been created for these changes.

Author: massahoudou

components/Hero.tsx

@@ -1,4 +1,4 @@
-import { FormEventHandler, useState } from 'react';
+import { FormEventHandler, MouseEventHandler, useRef, useState } from 'react';
 import Link from 'next/link';
 
 import languages from 'assets/languages.json';
@@ -11,13 +11,24 @@ const { main: mainLanguages, others: otherLanguages } = languages;
 
 function Hero() {
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [searchEmpty, setSearchEmpty] = useState<boolean>(false);
+  const formRef = useRef<HTMLFormElement | null>(null);
   const router = useRouter();
+  const handleClear: MouseEventHandler<HTMLButtonElement> = () => {
+    if (formRef.current && !searchEmpty ) {
+
+      formRef.current.reset();
+      setErrorMessage(null);
+    }
+
+  }
   const handleSubmit: FormEventHandler = e => {
     e.preventDefault();
     const formData = new FormData(e.target as HTMLFormElement);
     const search = (formData.get('search') as string).trim();
     // Check if the input is empty or contains only spaces
     if (search === '') {
+  
       setErrorMessage('Empty search terms invalid!');
       return;
     }
@@ -33,22 +44,37 @@ function Hero() {
           <h1 className="mb-5 text-2023-manga-3 text-5xl font-bold uppercase">
             Search your language
           </h1>
-          <form
+          <form ref={formRef}
             className="form-control w-full max-w-xs mx-auto items-center mt-10 mb-12"
             onSubmit={handleSubmit}
           >
             <div className="flex w-full">
-              <input
-                type="text"
-                placeholder="Search for your language"
-                className="input input-bordered w-full text-neutral-100 border-2023-bavarian-gold-2 focus:outline-2023-bavarian-gold-2 max-w-xs rounded-tr-none rounded-br-none bg-transparent"
-                name="search"
-              />
+              <div className='flex relative'>
+                <input
+                  type="text"
+                  placeholder="Search for your language"
+                  className="input input-bordered w-full text-neutral-100 border-2023-bavarian-gold-2 focus:outline-2023-bavarian-gold-2 max-w-xs rounded-tr-none rounded-br-none bg-transparent"
+                  name="search"
+                  onChange={
+                    (e) =>  {
+                      setSearchEmpty(e.target.value.trim() === '') ;
+                      console.log(searchEmpty);
+                    }
+                  }
+                />
+
+                {!searchEmpty && 
+                <button onClick={handleClear} className='absolute right-0 top-0 bottom-0  p-2'>
+                  <ClearIcon />
+                </button>}
+
+              </div>
               <button
                 type="submit"
                 className="group btn btn-square rounded-tl-none rounded-bl-none bg-transparent border-2023-manga-3 hover:bg-2023-manga-2 hover:text-2023-void-2 hover:border-2023-manga-2"
               >
                 <SearchIcon />
+
               </button>
             </div>
           </form>
@@ -106,5 +132,14 @@ const SearchIcon = () => (
     />
   </svg>
 );
+const ClearIcon = () => {
+  return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-4 h-4 text-white ">
+    <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+  </svg>
+
+
+}
 
 export default Hero;
+
+