Implemented search functionality in Explore page

frontend/src/components/SearchBox/SearchBox.jsx

@@ -0,0 +1,28 @@
+import React, { useState } from "react";
+import { LuSearch } from "react-icons/lu";
+import styles from "./SearchBox.module.css";
+
+const SearchBox = ({ onSearch }) => {
+  const [query, setQuery] = useState("");
+  const handleInputChange = (e) => {
+    setQuery(e.target.value);
+    onSearch(e.target.value);
+  };
+
+  return (
+    <div className={styles.searchBoxWrapper}>
+      <div className={styles.group}>
+        <LuSearch className={styles.searchIcon} />
+        <input
+          type="text"
+          value={query}
+          onChange={handleInputChange}
+          className={styles.input}
+          placeholder="Search..."
+        />
+      </div>
+    </div>
+  );
+};
+
+export default SearchBox;

frontend/src/components/SearchBox/SearchBox.module.css

@@ -0,0 +1,84 @@
+.searchBoxWrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.group {
+  display: flex;
+  line-height: 28px;
+  align-items: center;
+  position: relative;
+  max-width: 190px;
+}
+
+.searchIcon {
+  cursor: pointer;
+  position: absolute;
+  left: 1rem;
+  width: 1rem;
+  height: 1rem;
+}
+
+.input {
+  width: 100%;
+  height: 40px;
+  line-height: 28px;
+  padding: 0 1rem;
+  padding-left: 2.5rem;
+  border: 1px solid var(--input-border-color);
+  border-radius: 8px;
+  outline: none;
+  color: var(--text-color);
+  background: transparent;
+  border-radius: 12px;
+  font-family: Poppins;
+  font-size: 14px;
+  font-weight: 400;
+  opacity: 1;
+  letter-spacing: 0.5px;
+  transition: border-color 0.3s ease;
+}
+
+.input::placeholder {
+  color: #9e9ea7;
+  opacity: 1;
+  font-family: Poppins;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 24px;
+  text-align: left;
+}
+
+.input:focus {
+  outline: none;
+  border-color: #2d79f3;
+}
+
+.inputField:hover {
+  border-color: #2d79f3;
+}
+
+.input:focus-within {
+  border: 1px solid #2d79f3;
+}
+
+/* .visible {
+  display: block;
+  width: calc(100% - 20px);
+} */
+
+@media (max-width: 800px) {
+  /* .input {
+    display: none;
+  } */
+
+  /* .visible {
+    display: block;
+    width: calc(100% - 20px);
+  } */
+
+  .searchIcon {
+    display: block;
+  }
+}

frontend/src/pages/Explore/Explore.jsx

@@ -7,12 +7,15 @@ import {
   calculateColumns,
   getLeftoverGridClass,
   splitCardsIntoMainAndLeftover,
+  SearchBox,
   cardData,
   formatName,
 } from "./imports";
 
 const Explore = () => {
   const [columns, setColumns] = useState(3);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [filteredCards, setFilteredCards] = useState(cardData);
 
   useEffect(() => {
     const handleResize = () => {
@@ -25,17 +28,30 @@ const Explore = () => {
     return () => window.removeEventListener("resize", handleResize);
   }, []);
 
+  useEffect(() => {
+    const filtered = cardData.filter(
+      (card) =>
+        card.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        card.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        card.company.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+    setFilteredCards(filtered);
+  }, [searchQuery]);
+
   const { mainGridCards, leftoverCards } = splitCardsIntoMainAndLeftover(
-    cardData,
+    filteredCards,
     columns
   );
 
   return (
     <>
       <div className={styles.exploreWrapper}>
         <div className={styles.mainText}>
-          <h1>Explore</h1>
-          <IoArrowForward className={styles.arrowIcon} />
+          <div className={styles.leftContainer}>
+            <h1>Explore</h1>
+            <IoArrowForward className={styles.arrowIcon} />
+          </div>
+          <SearchBox onSearch={setSearchQuery} />
         </div>
         <div className={styles.gridContainer}>
           {mainGridCards.map((card, index) => (

frontend/src/pages/Explore/Explore.module.css

@@ -12,18 +12,24 @@
 .mainText {
   display: flex;
   align-items: center;
+  justify-content: space-between;
   margin-bottom: 20px;
   width: 100%;
   max-width: 1200px;
 }
 
-.mainText h1 {
+.leftContainer {
+  display: flex;
+  align-items: center;
+}
+
+.leftContainer h1 {
   margin: 0;
   margin-right: 10px;
 }
 
 .arrowIcon {
-  font-size: 2rem;
+  font-size: 1.8rem;
   vertical-align: middle;
 }
 
@@ -50,11 +56,21 @@
   margin-top: 15px;
 }
 
-/* Media query for screens up to 800px */
 @media (max-width: 800px) {
   .gridContainer {
     grid-template-columns: 1fr;
   }
+
+  .leftContainer h1 {
+    margin: 0;
+    margin-right: 10px;
+    font-size: 24px;
+  }
+
+  .arrowIcon {
+    font-size: 1rem;
+    vertical-align: middle;
+  }
 }
 
 @media (min-width: 801px) and (max-width: 1024px) {

frontend/src/pages/Explore/imports/index.js

@@ -15,3 +15,4 @@ export {
 } from "../gridHelper";
 
 export { default as cardData } from "../cardData";
+export { default as SearchBox } from "../../../components/SearchBox/SearchBox";