Merge pull request #218 from Jaimin25/search-box

Enhanced search box
kossiitkgp · Dec 12, 2023 · b3e03b2 · b3e03b2
2 parents 2a6151a + 7f2c9ab
commit b3e03b2
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 4 deletions.
diff --git a/src/pages/FAQ.tsx b/src/pages/FAQ.tsx
@@ -2,6 +2,8 @@ import Fuse from "fuse.js";
 import React, { useState } from "react";
 import { FAQs } from "../data/FAQs";
 import FooterSection from "../components/FooterSection";
+import { IconContext } from "react-icons";
+import { MdCancel } from "react-icons/md";
 
 export default function FAQ() {
   const [query, setQuery] = useState("");
@@ -30,16 +32,23 @@ export default function FAQ() {
               Wanna ask us a question? Check these first.
             </p>
           </section>
-
+          
           <div className="p-4 my-4 mx-0">
-            <div className="w-full bg-none border-none">
+            <div className="flex py-4 px-6 rounded-md outline-none w-[80vw] max-w-3xl border-none text-white bg-slate-900 font-semibold bg-none">
               <input
-                className="py-4 px-6 rounded-md outline-none w-[80vw] max-w-3xl border-none text-white bg-slate-900 font-semibold bg-none"
+                className="rounded-md outline-none w-full border-none text-white bg-slate-900 font-semibold bg-none"
                 type="text"
                 placeholder="Search your query"
                 onChange={onChangeHandler}
                 value={query}
               ></input>
+              {query !== "" && (
+                <button onClick={() => setQuery("")}>
+                  <IconContext.Provider value={{ size: "1.6rem" }}>
+                    <MdCancel />
+                  </IconContext.Provider>
+                </button>
+              )}
             </div>
           </div>
         </div>

diff --git a/src/pages/Projects.tsx b/src/pages/Projects.tsx
@@ -59,11 +59,13 @@ function Projects() {
             onChange={onQueryChangeHandler}
             value={query}
           ></input>
+          {query !== "" && (
           <button onClick={() => setQuery("")}>
-            <IconContext.Provider value={{ size: "1.8rem" }}>
+            <IconContext.Provider value={{ size: "1.6rem" }}>
               <MdCancel />
             </IconContext.Provider>
           </button>
+          )}
         </div>
       </div>