diff --git a/client/src/components/Home/SectionSecond.jsx b/client/src/components/Home/SectionSecond.jsx index 5554926..49e0799 100644 --- a/client/src/components/Home/SectionSecond.jsx +++ b/client/src/components/Home/SectionSecond.jsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useState, useEffect } from "react"; const SectionSecond = () => { // Sample data for categories @@ -61,39 +61,62 @@ const SectionSecond = () => { }, ]; + const [searchInput, setSearchInput] = useState(""); + const [searchResults, setSearchResults] = useState(categories); + + useEffect(() => { + const trimmedInput = searchInput.trim().toLowerCase(); + const results = categories.filter( + (category) => category.title.toLowerCase().includes(trimmedInput) + ); + setSearchResults(results); + }, [searchInput]); + return ( - -
-

- Search by Category -

-

Search your career opportunity with our categories

+
+

Search by Category

+

+ Search your career opportunity with our categories +

-
- {categories.map((category) => ( -
- {category.title} -
-

{category.title}

-
-

{category.positions}

- +
+ setSearchInput(e.target.value)} + className="border border-gray-300 rounded-lg px-4 py-2 mr-2" + placeholder="Enter category name" + /> +
+ +
+ {searchResults.length > 0 ? ( + searchResults.map((category) => ( +
+ {category.title} +
+

{category.title}

+
+

{category.positions}

+ +
-
- - ))} + )) + ) : ( +

Item not found

+ )}
- - ); };