implement search field

src/components/layout/main.tsx

@@ -15,6 +15,7 @@ import { useNavigate } from 'react-router-dom';
 
 interface LayoutProps {
   path: string,
+  handleSearch: any,
   title?: string,
   subTitle?: string,
   children: any
@@ -24,7 +25,7 @@ function classNames(...classes: unknown[]) {
   return classes.filter(Boolean).join(' ');
 }
 
-const Main = ({ path, title, subTitle, children }: LayoutProps) => {
+const Main = ({ path, handleSearch, title, subTitle, children }: LayoutProps) => {
   let auth = useAuth();
   let navigate = useNavigate();
 
@@ -34,6 +35,10 @@ const Main = ({ path, title, subTitle, children }: LayoutProps) => {
 
   const [sidebarOpen, setSidebarOpen] = useState(false);
 
+  let handleSearchChange = (e) => {
+      handleSearch(e.target.value);
+  }
+
   return (
     <div className="h-screen flex overflow-hidden bg-gray-100">
       <Navbar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} path={path} />
@@ -64,6 +69,7 @@ const Main = ({ path, title, subTitle, children }: LayoutProps) => {
                     placeholder="Rechercher"
                     type="search"
                     name="search"
+                    onChange={(e) => {handleSearchChange(e)}}
                   />
                 </div>
               </form>

src/pages/dashboard.tsx

+import React, { useState, useEffect } from 'react';
+
 import Main from "../components/layout/main";
 import SellListItem from "../components/sellListItem";
 
@@ -57,11 +59,25 @@ const products = [
 const Dashboard = () => {
 	const path = window.location.pathname;
 
+	let [search, setSearch] = useState("");
+	let [productsList, setProductsList] = useState(products);
+	
+	useEffect(() => {
+		// Filter products by name with the search term
+		setProductsList(products.filter(product => {
+			return product.name.toLowerCase().includes(search.toLowerCase());
+		}))
+	}, [search]);
+
+	let handleSearch = (search: string) => {
+		setSearch(search);
+	}
+
 	return (
-		<Main path={path} title="Accueil">
+		<Main path={path} handleSearch={handleSearch} title="Accueil">
 			<div className="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
 				<ul className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-5">
-					{products.map((product) => (
+					{productsList.map((product) => (
 						<SellListItem product={product} key={product.name} />
 					))}
 				</ul>