Merge pull request #2166 from nagalakshmi08/searchbar

Added functionality to Searchbar
codervivek5 · Aug 7, 2024 · 907bbb6 · 907bbb6
2 parents df70da4 + 269b206
commit 907bbb6
Show file tree

Hide file tree

Showing 6 changed files with 181 additions and 44 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -32,6 +32,7 @@
     "react": "^18.2.0",
     "react-confetti": "^6.1.0",
     "react-cookie-consent": "^9.0.0",
+    "react-ctrl-f": "^0.0.4",
     "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",
     "react-hot-toast": "^2.4.1",

diff --git a/src/User/components/Navbar/UserNavbar.jsx b/src/User/components/Navbar/UserNavbar.jsx
@@ -13,6 +13,7 @@ const UserNavbar = ({ isAdmin }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [searchTerm, setSearchTerm] = useState("");
   const [showDropdown, setShowDropdown] = useState(false);
+  const [searchResults, setSearchResults] = useState([]);
   const navigate = useNavigate();
   const dropdownRef = useRef(null);
 
@@ -23,14 +24,35 @@ const UserNavbar = ({ isAdmin }) => {
   const toggleNavbar = () => setIsOpen(!isOpen);
   const handleSearch = (e) => setSearchTerm(e.target.value);
 
-  // const handleLogout = () => {
-  //   if (window.confirm("Are you sure you want to logout?")) {
-  //     localStorage.removeItem("isLoggedIn");
-  //     localStorage.removeItem("username");
-  //     alert("Logout Successful.");
-  //     navigate("/login");
-  //   }
-  // };
+  const searchableItems = [
+    { name: "Fashion & Accessories", link: "/popularCategories/fashionAccessories" },
+    { name: "Printing & Stationery", link: "/popularCategories/printingStationery" },
+    { name: "Food & Beverages", link: "/popularCategories/foodBeverages" },
+    { name: "Beauty & Wellness", link: "/popularCategories/beautyWellness" },
+    { name: "Furniture & Decor", link: "/popularCategories/furnitureDecor" },
+    { name: "Body Care", link: "/popularCategories/bodyCare" },
+    { name: "Health Supplements", link: "/popularCategories/healthSupplements" },
+    { name: "Customized Gifts", link: "/popularCategories/customizedGifts" },
+    { name: "Handmade Soaps", link: "/latestInMarket/handmadeSoaps" },
+    { name: "Art Supplies", link: "/latestInMarket/artSupplies" },
+    { name: "Ceramic Dinnerware", link: "/latestInMarket/ceramicDinnerware" },
+    { name: "Bamboo Products", link: "/latestInMarket/bambooProducts" },
+    { name: "Storage Baskets", link: "/latestInMarket/storageBaskets" },
+    { name: "Organic Soaps", link: "/latestInMarket/organicSoaps" },
+    { name: "Organic Tea", link: "/latestInMarket/organicTea" },
+    { name: "Natural Cosmetics", link: "/latestInMarket/naturalCosmetics" },
+  ];
+
+  useEffect(() => {
+    if (searchTerm) {
+      const results = searchableItems.filter(item =>
+        item.name.toLowerCase().includes(searchTerm.toLowerCase())
+      );
+      setSearchResults(results);
+    } else {
+      setSearchResults([]);
+    }
+  }, [searchTerm]);
 
   const handleLogout = () => {
     Swal.fire({
@@ -88,6 +110,12 @@ const UserNavbar = ({ isAdmin }) => {
     { to: "/popularCategories/bodyCare", text: "Body-Care" },
   ];
 
+  const handleResultClick = (link) => {
+    navigate(link);
+    setSearchTerm("");
+    setSearchResults([]);
+  };
+
   return (
     <nav className="bg-[#ecd5c5] shadow-lg fixed w-full z-50 -mt-1">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
@@ -117,6 +145,8 @@ const UserNavbar = ({ isAdmin }) => {
                   <SearchBar
                     searchTerm={searchTerm}
                     handleSearch={handleSearch}
+                    searchResults={searchResults}
+                    onResultClick={handleResultClick}
                   />
                 </div>
                 <div className="flex md:gap-6 gap-7 mr-4 md:mr-0">
@@ -126,9 +156,6 @@ const UserNavbar = ({ isAdmin }) => {
                 <div className="md:block hidden">
                   {isLoggedIn ? (
                     <div className="relative flex gap-3 items-center">
-                      {/* <FaUserCircle
-                      onClick={handleDropdownToggle}                     className="text-3xl cursor-pointer"
-                    /> */}
                       <lord-icon
                         onClick={handleDropdownToggle}
                         className="text-3xl cursor-pointer"

diff --git a/src/User/components/SearchBar/SearchBar.jsx b/src/User/components/SearchBar/SearchBar.jsx
@@ -1,20 +1,33 @@
 import React from "react";
 import { FaSearch } from "react-icons/fa";
 
-const SearchBar = ({ searchTerm, handleSearch }) => (
+const SearchBar = ({ searchTerm, handleSearch, searchResults, onResultClick }) => (
   <>
-    <div className="flex items-center rounded-full border-green-800 border-2 bg-gray-200 px-4 py-2 w-80">
-      <input
-        type="text"
-        placeholder="Search"
-        className="bg-transparent outline-none w-full text-green-700"
-        value={searchTerm}
-        onChange={handleSearch}
-      />
-      <FaSearch className="text-green-800" />
+    <div className="relative">
+      <div className="flex items-center rounded-full border-green-800 border-2 bg-gray-200 px-4 py-2 w-80">
+        <input
+          type="text"
+          placeholder="Search for products"
+          className="bg-transparent outline-none w-full text-green-700"
+          value={searchTerm}
+          onChange={handleSearch}
+        />
+        <FaSearch className="text-green-800" />
+      </div>
+      {searchResults.length > 0 && (
+        <ul className="absolute top-12 left-0 bg-white border border-green-800 w-full rounded-md shadow-lg z-10">
+          {searchResults.map((result, index) => (
+            <li
+              key={index}
+              className="px-4 py-2 text-green-700 hover:bg-green-200 cursor-pointer list-none"
+              onClick={() => onResultClick(result.link)}>
+              {result.name}
+            </li>
+          ))}
+        </ul>
+      )}
     </div>
   </>
 );
 
 export default SearchBar;
-// SearchBar.jsx
diff --git a/src/User/pages/Home/Home.jsx b/src/User/pages/Home/Home.jsx
@@ -1,4 +1,5 @@
 import React, { useRef, useState } from "react";
+import { useNavigate } from "react-router-dom";
 import CategoryCard from "../../components/HomPageCard/CategoryCard";
 import LatestInMarketCard from "../../components/HomPageCard/LatestInMarketCard";
 import background from "../../../assets/background.png";
@@ -24,8 +25,7 @@ import BambooProductsImg from "../../../assets/Bamboo-Products.png";
 import StorageBasketsImg from "../../../assets/Storage-Baskets.png";
 import DownArrow from "../../components/DownArrow/downArrow";
 
-//Redirectinh links --->
-
+// Redirecting links
 const popularCategories = [
   {
     name: "Fashion & Accessories",
@@ -132,19 +132,40 @@ const latestProducts = [
 const Home = () => {
   const sectionRef = useRef(null);
   const [searchTerm, setSearchTerm] = useState("");
-  const handleSearch = (e) => setSearchTerm(e.target.value);
+  const [suggestions, setSuggestions] = useState([]);
+  const navigate = useNavigate();
+
+  const handleSearch = (e) => {
+    const term = e.target.value;
+    setSearchTerm(term);
+
+    // Filter categories and products for suggestions
+    const filteredSuggestions = [
+      ...popularCategories.filter(category => category.name.toLowerCase().includes(term.toLowerCase())),
+      ...latestProducts.filter(product => product.name.toLowerCase().includes(term.toLowerCase()))
+    ];
+    setSuggestions(filteredSuggestions);
+  };
+
+  const handleSuggestionClick = (suggestion) => {
+    // Navigate to the corresponding path
+    navigate(suggestion.path);
+  };
 
   const scrollToSection = () => {
     sectionRef.current.scrollIntoView({ behavior: "smooth" });
   };
 
   return (
-    <div className="bg-[#fff0e3ff]" style={{
-      transform: "translateY(20px)",
-    }}>
+    <div className="bg-[#fff0e3ff]" style={{ transform: "translateY(20px)" }}>
       <main className="mt-1">
         <div className="sm:block md:hidden bg-[#eff0f1] pt-5">
-          <SearchBar searchTerm={searchTerm} handleSearch={handleSearch} />
+          <SearchBar 
+            searchTerm={searchTerm} 
+            handleSearch={handleSearch} 
+            suggestions={suggestions} 
+            handleSuggestionClick={handleSuggestionClick} 
+          />
         </div>
         {/* Hero Section */}
         <section
@@ -186,7 +207,6 @@ const Home = () => {
           </div>
         </section>
         {/* Popular Categories */}
-
         <section className="py-8 sm:py-12 md:py-16 bg-[#fff0e3ff]">
           <div className="container mx-auto px-4">
             <h2 className="text-xl sm:text-2xl md:text-3xl font-bold mb-6 md:mb-8 text-black">
@@ -204,7 +224,6 @@ const Home = () => {
             </div>
           </div>
         </section>
-
         {/* Latest in the Market */}
         <section
           className="bg-[#fff0e3ff] py-8 sm:py-12 md:py-16"
@@ -225,7 +244,6 @@ const Home = () => {
             </div>
           </div>
         </section>
-
         {/* App Download Section */}
         <section
           className="py-8 sm:py-12 md:py-16 relative mb-[-1px]"
@@ -305,3 +323,4 @@ const Home = () => {
 };
 
 export default Home;
+
diff --git a/src/User/pages/Home/SearchBar.jsx b/src/User/pages/Home/SearchBar.jsx
@@ -1,17 +1,29 @@
-// SearchBar.jsx
 import React from "react";
 import { FaSearch } from "react-icons/fa";
 
-const SearchBar = ({ searchTerm, handleSearch }) => (
-  <div className="flex items-center rounded-full border-green-800 border-2 bg-gray-200 px-4 py-2 w-[90%] ml-6 mt-20">
+const SearchBar = ({ searchTerm, handleSearch, suggestions, handleSuggestionClick }) => (
+  <div className="relative flex items-center rounded-full border-green-800 border-2 bg-gray-200 px-4 py-2 w-[90%] ml-6 mt-20">
     <input
       type="text"
-      placeholder="Search"
+      placeholder="Search for products"
       className="bg-transparent outline-none w-full text-green-700"
       value={searchTerm}
       onChange={handleSearch}
     />
     <FaSearch className="text-green-800" />
+    {suggestions.length > 0 && (
+      <div className="absolute top-full left-0 w-full bg-white border border-gray-300 mt-2 rounded-md shadow-lg">
+        {suggestions.map((suggestion, index) => (
+          <div
+            key={index}
+            onClick={() => handleSuggestionClick(suggestion)}
+            className="px-4 py-2 cursor-pointer hover:bg-gray-100"
+          >
+            {suggestion.name}
+          </div>
+        ))}
+      </div>
+    )}
   </div>
 );