add scroll-y lock on search

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 (query.trim() === '') {
-                setSearchResults([]);
-                return;
-            }
-
-            const data = await searchEvents(query);
-            if (data) {
-                setSearchResults(data);
-            } else {
-                setSearchResults([]);
-            }
-        };
-
-
-        const handler = setTimeout(() => {
-            performSearch(searchQuery);
-        }, 300);
+        if (isSearchVisible) {
+            document.documentElement.style.overflow = 'hidden';
+        } else {
+            document.documentElement.style.overflow = '';
+        }
 
         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
-                        searchQuery={searchQuery}
-                        setSearchQuery={setSearchQuery}
-                    />
-                    {searchResults.map((event, index) => (
-                        <Event key={index} event={event} />
-                    ))}
+                    <SearchBar/>
                 </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;