searchbar added

noorjsdivs · Jun 8, 2023 · 5bb0b3c · 5bb0b3c · vercel · Jun 8, 2023
1 parent 8c1029c
commit 5bb0b3c
Show file tree

Hide file tree

Showing 4 changed files with 106 additions and 20 deletions.
diff --git a/src/components/home/Footer/Footer.js b/src/components/home/Footer/Footer.js
@@ -1,7 +1,6 @@
 import React, { useState } from "react";
 import { motion } from "framer-motion";
-import { FaFacebook, FaYoutube, FaInstagram } from "react-icons/fa";
-import { BsTwitter } from "react-icons/bs";
+import { FaFacebook, FaYoutube, FaLinkedin, FaGithub } from "react-icons/fa";
 import FooterListTitle from "./FooterListTitle";
 import { paymentCard } from "../../../assets/images";
 import Image from "../../designLayouts/Image";
@@ -39,18 +38,42 @@ const Footer = () => {
               ab ullam, numquam nesciunt in.
             </p>
             <ul className="flex items-center gap-2">
-              <li className="w-7 h-7 bg-primeColor text-gray-100 hover:text-white cursor-pointer text-lg rounded-full flex justify-center items-center hover:bg-black duration-300">
-                <FaFacebook />
-              </li>
-              <li className="w-7 h-7 bg-primeColor text-gray-100 hover:text-white cursor-pointer text-lg rounded-full flex justify-center items-center hover:bg-black duration-300">
-                <FaInstagram />
-              </li>
-              <li className="w-7 h-7 bg-primeColor text-gray-100 hover:text-white cursor-pointer text-lg rounded-full flex justify-center items-center hover:bg-black duration-300">
-                <FaYoutube />
-              </li>
-              <li className="w-7 h-7 bg-primeColor text-gray-100 hover:text-white cursor-pointer text-lg rounded-full flex justify-center items-center hover:bg-black duration-300">
-                <BsTwitter />
-              </li>
+              <a
+                href="https://www.youtube.com/@reactjsBD"
+                target="_blank"
+                rel="noreferrer"
+              >
+                <li className="w-7 h-7 bg-primeColor text-gray-100 hover:text-white cursor-pointer text-lg rounded-full flex justify-center items-center hover:bg-black duration-300">
+                  <FaYoutube />
+                </li>
+              </a>
+              <a
+                href="https://github.com/noorjsdivs"
+                target="_blank"
+                rel="noreferrer"
+              >
+                <li className="w-7 h-7 bg-primeColor text-gray-100 hover:text-white cursor-pointer text-lg rounded-full flex justify-center items-center hover:bg-black duration-300">
+                  <FaGithub />
+                </li>
+              </a>
+              <a
+                href="https://www.facebook.com/Noorlalu143/"
+                target="_blank"
+                rel="noreferrer"
+              >
+                <li className="w-7 h-7 bg-primeColor text-gray-100 hover:text-white cursor-pointer text-lg rounded-full flex justify-center items-center hover:bg-black duration-300">
+                  <FaFacebook />
+                </li>
+              </a>
+              <a
+                href="https://www.linkedin.com/in/noor-mohammad-ab2245193/"
+                target="_blank"
+                rel="noreferrer"
+              >
+                <li className="w-7 h-7 bg-primeColor text-gray-100 hover:text-white cursor-pointer text-lg rounded-full flex justify-center items-center hover:bg-black duration-300">
+                  <FaLinkedin />
+                </li>
+              </a>
             </ul>
           </div>
         </div>

diff --git a/src/components/home/Header/HeaderBottom.js b/src/components/home/Header/HeaderBottom.js
@@ -3,13 +3,15 @@ import { motion } from "framer-motion";
 import { HiOutlineMenuAlt4 } from "react-icons/hi";
 import { FaSearch, FaUser, FaCaretDown, FaShoppingCart } from "react-icons/fa";
 import Flex from "../../designLayouts/Flex";
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import { useSelector } from "react-redux";
+import { paginationItems } from "../../../constants";
 
 const HeaderBottom = () => {
   const products = useSelector((state) => state.orebiReducer.products);
   const [show, setShow] = useState(false);
   const [showUser, setShowUser] = useState(false);
+  const navigate = useNavigate();
   const ref = useRef();
   useEffect(() => {
     document.body.addEventListener("click", (e) => {
@@ -21,8 +23,23 @@ const HeaderBottom = () => {
     });
   }, [show, ref]);
 
+  const [searchQuery, setSearchQuery] = useState("");
+  const [filteredProducts, setFilteredProducts] = useState([]);
+  const [showSearchBar, setShowSearchBar] = useState(false);
+
+  const handleSearch = (e) => {
+    setSearchQuery(e.target.value);
+  };
+
+  useEffect(() => {
+    const filtered = paginationItems.filter((item) =>
+      item.productName.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+    setFilteredProducts(filtered);
+  }, [searchQuery]);
+
   return (
-    <div className="w-full bg-[#F5F5F3]">
+    <div className="w-full bg-[#F5F5F3] relative">
       <div className="max-w-container mx-auto">
         <Flex className="flex flex-col lg:flex-row items-start lg:items-center justify-between w-full px-4 pb-4 lg:pb-0 h-full lg:h-24">
           <div
@@ -61,13 +78,57 @@ const HeaderBottom = () => {
               </motion.ul>
             )}
           </div>
-          <div className="relative w-full lg:w-[600px] h-[50px] text-base text-primeColor bg-white flex items-center justify-between px-6">
+          <div className="relative w-full lg:w-[600px] h-[50px] text-base text-primeColor bg-white flex items-center gap-2 justify-between px-6 rounded-xl">
             <input
-              className="max-w-[80%] h-full outline-none placeholder:text-[#C4C4C4] placeholder:text-[14px]"
+              className="flex-1 h-full outline-none placeholder:text-[#C4C4C4] placeholder:text-[14px]"
               type="text"
-              placeholder="Search Products"
+              onChange={handleSearch}
+              value={searchQuery}
+              placeholder="Search your products here"
             />
             <FaSearch className="w-5 h-5" />
+            {searchQuery && (
+              <div
+                className={`w-full mx-auto h-96 bg-white top-16 absolute left-0 z-50 overflow-y-scroll shadow-2xl scrollbar-hide cursor-pointer`}
+              >
+                {searchQuery &&
+                  filteredProducts.map((item) => (
+                    <div
+                      onClick={() =>
+                        navigate(
+                          `/product/${item.productName
+                            .toLowerCase()
+                            .split(" ")
+                            .join("")}`,
+                          {
+                            state: {
+                              item: item,
+                            },
+                          }
+                        ) &
+                        setShowSearchBar(true) &
+                        setSearchQuery("")
+                      }
+                      key={item._id}
+                      className="max-w-[600px] h-28 bg-gray-100 mb-3 flex items-center gap-3"
+                    >
+                      <img className="w-24" src={item.img} alt="productImg" />
+                      <div className="flex flex-col gap-1">
+                        <p className="font-semibold text-lg">
+                          {item.productName}
+                        </p>
+                        <p className="text-xs">{item.des}</p>
+                        <p className="text-sm">
+                          Price:{" "}
+                          <span className="text-primeColor font-semibold">
+                            ${item.price}
+                          </span>
+                        </p>
+                      </div>
+                    </div>
+                  ))}
+              </div>
+            )}
           </div>
           <div className="flex gap-4 mt-2 lg:mt-0 items-center pr-6 cursor-pointer relative">
             <div onClick={() => setShowUser(!showUser)} className="flex">

diff --git a/src/components/pageProps/productDetails/ProductInfo.js b/src/components/pageProps/productDetails/ProductInfo.js
@@ -4,7 +4,6 @@ import { addToCart } from "../../../redux/orebiSlice";
 
 const ProductInfo = ({ productInfo }) => {
   const dispatch = useDispatch();
-  console.log(productInfo);
   return (
     <div className="flex flex-col gap-5">
       <h2 className="text-4xl font-semibold">{productInfo.productName}</h2>

diff --git a/src/index.css b/src/index.css
@@ -28,4 +28,7 @@ nav .active li {
   }
 }
 
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
 /* ============= NavLink active End here ================ */