fixed, item select in the hero section

taskinnasif144 · Mar 30, 2024 · 65c2b39 · 65c2b39
1 parent f5721dc
commit 65c2b39
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 6 deletions.
diff --git a/Components/home/LandingPageInput.js b/Components/home/LandingPageInput.js
@@ -1,12 +1,13 @@
 "use client";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useRef } from "react";
 
 import { servicesArray } from "../../constants";
 
 function LandingPageInput() {
   const [inputValue, setInputValue] = useState("");
   const [filteredSuggestions, setFilteredSuggestions] = useState([]);
   const [showSuggestions, setShowSuggestions] = useState(false);
+  const itemsRef = useRef(null);
 
   const handleInput = (e) => {
     const input = e.target.value;
@@ -22,8 +23,22 @@ function LandingPageInput() {
     }
   };
 
+  const handleOutsideClick = (e) => {
+    if (itemsRef.current && !itemsRef.current.contains(e.target)) {
+      setShowSuggestions(false);
+      console.log(showSuggestions);
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener("mousedown", handleOutsideClick); // Corrected event name
+    return () => {
+      document.removeEventListener("mousedown", handleOutsideClick);
+    };
+  });
+
   return (
-    <div className="p-1 px-2  text-xs sxs:p-1 sxs:px-3 sxs:text-base lg:px-[32px] lg:py-[12px] bg-white rounded-[20px] relative">
+    <div className="p-1 px-2  text-xs sxs:p-1 sxs:px-3 sxs:text-base lg:px-[32px] md:py-2 bg-white rounded-s-full rounded-e-full relative">
       <input
         className="bg-transparent outline-none w-full text-black"
         placeholder="eg. AC Service, PC service ..."
@@ -32,10 +47,16 @@ function LandingPageInput() {
         onChange={handleInput}
       />
       {showSuggestions && filteredSuggestions.length > 0 ? (
-        <ul className="absolute  top-[120%]  bg-white w-[90%] min-w-40 text-xs sxs:text-base p-2 rounded-sm shadow-lg max-h-[500px] overflow-y-auto z-50">
+        <ul
+          ref={itemsRef}
+          className="absolute  top-[120%]  bg-white w-[90%] min-w-40 text-xs sxs:text-base p-2 rounded-sm shadow-lg max-h-[500px] overflow-y-auto z-50">
           {filteredSuggestions.map((suggestion, index) => {
             return (
               <li
+                onClick={() => {
+                  setInputValue(suggestion);
+                  setShowSuggestions(false);
+                }}
                 key={index}
                 className="text-black w-full cursor-pointer  hover:bg-slate-400 px-4 py-2 rounded-md border-b">
                 {suggestion}

diff --git a/app/services/page.js b/app/services/page.js
@@ -18,10 +18,12 @@ export default function Home() {
             const element = document.querySelector(`#${entry.target.id}-btn`);
             element.classList.add("bg-[#436850]");
             element.classList.add("scale-110");
+            element.classList.add("font-bold");
           } else {
             const element = document.querySelector(`#${entry.target.id}-btn`);
             element.classList.remove("bg-[#436850]");
             element.classList.remove("scale-110");
+            element.classList.remove("font-bold");
           }
         });
       },
@@ -61,7 +63,7 @@ export default function Home() {
                 key={index}
                 onClick={() => scrollTOHash(val.service.serviceID)}
                 id={`${val.service.serviceID}-btn`}
-                className={`flex flex-col xs:flex-row justify-center items-center m-2 p-2  cursor-pointer select-none rounded-lg transition-all scale-1 hover:bg-[#436850ad]`}>
+                className={`flex flex-col xs:flex-row justify-center items-center m-2 p-2  cursor-pointer select-none rounded-lg transition-all scale-1 hover:bg-[#436850ad] `}>
                 <Image
                   alt="logo"
                   src={"/clipArts/apple.png"}
@@ -91,10 +93,10 @@ export default function Home() {
                   return (
                     <div
                       key={index}
-                      className={`flex items-center my-3  m-2 p-2 rounded-xl border-b-[1px] border-[#436850]  hover:bg-[#436850ad]`}>
+                      className={`flex items-center my-3  m-2 p-2 rounded-xl border-b-[1px] border-[#436850] transition-all  hover:bg-[#436850ad]`}>
                       <Image
                         alt="service image"
-                        src={sub.source}
+                        src={sub.source} 
                         height={100}
                         width={100}
                         className="w-12 h-12 rounded-lg mr-2 object-cover object-center"