Merge pull request #201 from massdx/feat/clear-field

feat: Added clear field functionality and searchEmpty check

Author: max-programming

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,7 +11,16 @@ const { main: mainLanguages, others: otherLanguages } = languages;
 
 function Hero() {
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [isSearchEmpty, setIsSearchEmpty] = useState(true);
+  const formRef = useRef<HTMLFormElement | null>(null);
   const router = useRouter();
+  const handleClear: MouseEventHandler<HTMLButtonElement> = () => {
+    if (formRef.current && !isSearchEmpty) {
+      formRef.current.reset();
+      setIsSearchEmpty(true);
+      setErrorMessage(null);
+    }
+  };
   const handleSubmit: FormEventHandler = e => {
     e.preventDefault();
     const formData = new FormData(e.target as HTMLFormElement);
@@ -34,16 +43,31 @@ function Hero() {
             Search your language
           </h1>
           <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 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"
+                  onChange={e => {
+                    setIsSearchEmpty(e.target.value.trim() === '');
+                  }}
+                />
+
+                {!isSearchEmpty && (
+                  <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-bavarian-gold-2 hover:bg-2023-manga-2 hover:text-2023-void-2 hover:border-2023-manga-2"
@@ -106,5 +130,23 @@ 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;