add scroll-y lock on search

src/components/Event/Event.module.css

@@ -7,6 +7,7 @@
 
 .eventContainerTop {
     display: flex;
+    justify-content: space-between;
 }
 
 .eventContainerBottom{

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>
     );
 }

src/components/SearchBar/SearchBar.module.css

@@ -10,6 +10,58 @@
     display: flex;
 }
 
+
+
+.eventImageDiv {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 1rem;
+    width: auto;
+    height: 2rem;
+    flex-shrink: 0;
+}
+
+.searchedEvent{
+    display: flex;
+    padding: 0.5rem;
+    border-radius: 15px;
+    align-items: center;
+}
+
+.searchedEvent:hover {
+    background: #afafaf;
+    cursor: pointer;
+}
+
+.searchedEvent p {
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+    color: black;
+}
+
+
+.lineContainer{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.line{
+    height: 0;
+    width: 96%;
+    border: #606060 solid 1px;
+    margin: 0.5rem 0;
+}
+
+.eventImage {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+    border-radius: 20px;
+}
+
 .searchBarForm input{
     background: none;
     box-shadow: none;

src/index.css

@@ -1,8 +1,10 @@
 * {
   margin: 0;
   padding: 0;
-  width: 100%;
   box-sizing: border-box;
+}
+
+html {
   overflow-x: hidden;
 }
 
@@ -20,12 +22,14 @@
 @media screen and (max-width: 768px) {
   .content{
     padding: 0.7rem;
-    z-index:1;
   }
 }
+
+
 .content {
   padding: 1.5rem;
   z-index: 1;
+  width: 100%;
 }
 
 a {

src/pages/Events/EventsPage.jsx

@@ -4,14 +4,12 @@ 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);
     };
@@ -21,33 +19,19 @@ function EventsPage(){
         yearOrder: "asc",
     });
 
-
-
-
     useEffect(() => {
-        const performSearch = async (query) => {
+        if (isSearchVisible) {
-            if (query.trim() === '') {
+            document.documentElement.style.overflow = 'hidden';
-                setSearchResults([]);
-                return;
-            }
-
-            const data = await searchEvents(query);
-            if (data) {
-                setSearchResults(data);
         } else {
-                setSearchResults([]);
+            document.documentElement.style.overflow = '';
         }
-        };
-
-
-        const handler = setTimeout(() => {
-            performSearch(searchQuery);
-        }, 300);
 
         return () => {
-            clearTimeout(handler);
+            document.documentElement.style.overflow = '';
         };
-    }, [searchQuery]);
+    }, [isSearchVisible]);
+
+
 
 
     const [events] = useState([
@@ -259,13 +243,7 @@ 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

@@ -34,6 +34,7 @@
     padding: 5px 5px 5px 5px;
 }
 
+
 .searchBarOverlay {
     position: fixed;
     top: 0;
@@ -41,9 +42,9 @@
     width: 100%;
     height: 100%;
     z-index: 100;
+    background-color: rgba(0, 0, 0, 0.3);
+    backdrop-filter: blur(4px);
 }
-
-
 .searchBarContainer{
     display: flex;
     justify-content: center;