add scroll-y lock on search

src/components/SearchBar/SearchBar.jsx

@@ -1,6 +1,37 @@
 import styles from "./SearchBar.module.css"
+import {Link} from "react-router";
+import {useEffect, useState} from "react";
+import searchEvents from "../../utils/searchEvents.js";
+
+function SearchBar() {
+    const [searchQuery, setSearchQuery] = useState('');
+    const [searchResults, setSearchResults] = useState([]);
+
+    useEffect(() => {
+        const performSearch = async (query) => {
+            if (query.trim() === '') {
+                setSearchResults([]);
+                return;
+            }
+
+            const data = await searchEvents(query);
+            if (data) {
+                setSearchResults(data);
+            } else {
+                setSearchResults([]);
+            }
+        };
+
+
+        const handler = setTimeout(() => {
+            performSearch(searchQuery);
+        }, 300);
+
+        return () => {
+            clearTimeout(handler);
+        };
+    }, [searchQuery]);
 
-function SearchBar({ searchQuery, setSearchQuery}) {
     return (
         <div className={`${styles.searchBarContainer} glassCard`}>
             <form className={styles.searchBarForm} onSubmit={(event) => event.preventDefault()}>
@@ -15,6 +46,28 @@ function SearchBar({ searchQuery, setSearchQuery}) {
                     onChange={(event) => setSearchQuery(event.target.value)}
                 />
             </form>
+
+            <div className={styles.lineContainer}>
+                {searchResults.length > 0 ? (
+                    <div className={styles.line}></div>
+                ) : null}
+            </div>
+
+
+            {searchResults.map((result, i) => (
+                <Link to={`/event/` + event.id}>
+                    <div className={styles.searchedEvent} key={i}>
+                        <div className={`${styles.eventImageDiv}`}>
+                            {result.image == null ? (
+                                <img src="empty.png" className={styles.eventImage} alt="Pas de photo de l'événement" />
+                            ) : (
+                                <img src={result.image + `.png`} alt="Photo de l'événement" />
+                            )}
+                        </div>
+                        <p>{result.name}</p>
+                    </div>
+                </Link>
+            ))}
         </div>
     );
 }