add dedicated code to call work with the search of events

src/components/Event/Event.jsx

@@ -39,18 +39,20 @@ function Event({event}){
                     <div className={styles.eventInfos}>
                         <p className={styles.eventTitle}>{event.name}</p>
                         <p>{event.description}</p>
-                        <div className={eventMenu ? styles.eventMenuOpen : styles.eventMenuClose}>
+                        {event.tasks != null ? (
-                            <ul>
+                            <div className={eventMenu ? styles.eventMenuOpen : styles.eventMenuClose}>
-                                {event.tasks
+                                <ul>
-                                    .slice(0,5)
+                                    {event.tasks
-                                    .map((task, index) => (
+                                        .slice(0,5)
-                                        <li key={index}> - {task.name}</li>
+                                        .map((task, index) => (
-                                    ))}
+                                            <li key={index}> - {task.name}</li>
-                                {event.tasks.length > 5 ? (
+                                        ))}
-                                    <li>...</li>
+                                    {event.tasks.length > 5 ? (
-                                ) : null}
+                                        <li>...</li>
-                            </ul>
+                                    ) : null}
-                        </div>
+                                </ul>
+                            </div>
+                        ) : null}
                     </div>
                 </div>
                 {windowSize.width > 768 ? (

src/components/SearchBar/SearchBar.jsx

@@ -1,16 +1,19 @@
 import styles from "./SearchBar.module.css"
 
-function SearchBar() {
+function SearchBar({ searchQuery, setSearchQuery}) {
-
-
     return (
         <div className={`${styles.searchBarContainer} glassCard`}>
-            <form className={styles.searchBarForm} action="" method="POST">
+            <form className={styles.searchBarForm} onSubmit={(event) => event.preventDefault()}>
                 <svg xmlns="http://www.w3.org/2000/svg" width="24px" viewBox="0 -960 960 960" fill="#currentColor">
                     <path
                         d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/>
                 </svg>
-                <input type="text" placeholder="Rechercher un événement"/>
+                <input
+                    type="text"
+                    placeholder="Rechercher un événement"
+                    value={searchQuery}
+                    onChange={(event) => setSearchQuery(event.target.value)}
+                />
             </form>
         </div>
     );

src/pages/Events/EventsPage.jsx

@@ -4,11 +4,14 @@ import {Link} from "react-router";
 import styles from "./EventsPage.module.css";
 import Filter from "../../components/Filter/Filter.jsx";
 import SearchBar from "../../components/SearchBar/SearchBar.jsx";
+import searchEvents from "../../utils/searchEvents.js"
 
 
 function EventsPage(){
     const [isFilterVisible, setIsFilterVisible] = useState(false);
     const [isSearchVisible, setIsSearchVisible] = useState(false);
+    const [searchQuery, setSearchQuery] = useState('');
+    const [searchResults, setSearchResults] = useState([]);
     const toggleFilters = () => {
         setIsFilterVisible(prev => !prev);
     };
@@ -18,17 +21,34 @@ function EventsPage(){
         yearOrder: "asc",
     });
 
+
+
+
     useEffect(() => {
-        if (isSearchVisible) {
+        const performSearch = async (query) => {
-            document.getElementById("root").style.overflow = 'hidden';
+            if (query.trim() === '') {
-        } else {
+                setSearchResults([]);
-            document.getElementById("root").style.overflow = '';
+                return;
-        }
+            }
+
+            const data = await searchEvents(query);
+            if (data) {
+                setSearchResults(data);
+            } else {
+                setSearchResults([]);
+            }
+        };
+
+
+        const handler = setTimeout(() => {
+            performSearch(searchQuery);
+        }, 300);
 
         return () => {
-            document.getElementById("root").style.overflow = '';
+            clearTimeout(handler);
         };
-    }, [isSearchVisible]);
+    }, [searchQuery]);
+
 
     const [events] = useState([
         {
@@ -239,7 +259,13 @@ function EventsPage(){
             {isSearchVisible ? (
                 <div className={styles.searchBarContainer}>
                     <div className={styles.searchBarOverlay} onClick={() => setIsSearchVisible(false)}></div>
-                    <SearchBar/>
+                    <SearchBar
+                        searchQuery={searchQuery}
+                        setSearchQuery={setSearchQuery}
+                    />
+                    {searchResults.map((event, index) => (
+                        <Event key={index} event={event} />
+                    ))}
                 </div>
             ) : null}
 

src/pages/Events/EventsPage.module.css

@@ -41,8 +41,6 @@
     width: 100%;
     height: 100%;
     z-index: 100;
-    background-color: rgba(0, 0, 0, 0.3);
-    backdrop-filter: blur(4px);
 }