initialize searchBar component

src/components/SearchBar/SearchBar.jsx

@@ -0,0 +1,23 @@
+import styles from "./SearchBar.module.css"
+
+function SearchBar({isSearchVisible, setIsSearchVisible}) {
+
+
+    return (
+        <div>
+            <form action="" method="POST">
+                <div>
+                    <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"/>
+                </div>
+
+            <button onClick={() => setIsSearchVisible(false)}>ok</button>
+                </form>
+        </div>
+    );
+}
+
+export default SearchBar;

src/pages/Events/EventsPage.jsx

@@ -3,11 +3,12 @@ import Event from "../../components/Event/Event.jsx";
 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";
 
 
 function EventsPage(){
     const [isFilterVisible, setIsFilterVisible] = useState(false);
+    const [isSearchVisible, setIsSearchVisible] = useState(false);
     const toggleFilters = () => {
         setIsFilterVisible(prev => !prev);
     };
@@ -222,12 +223,24 @@ function EventsPage(){
 
     return (
         <div className={styles.eventsContainer}>
+
+            {isSearchVisible ? (
+                <SearchBar className={styles.searchBar} setIsSearchVisible={setIsSearchVisible} isSearchVisible={isSearchVisible} />
+            ) : null}
+
             <div className={styles.eventsButtons}>
                 <Link
                     to="/event/create"
                     className={`${styles.createButton} glassCard`}>
                     +
                 </Link>
+
+                <button className={`${styles.searchButton} glassCard`} onClick={() => setIsSearchVisible(true)}>
+                    <svg xmlns="http://www.w3.org/2000/svg" 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>
+                </button>
+
                 <div className={`${styles.filterContainer} ${isFilterVisible ? "glassCard" : ""}`}>
                     <button className={`${isFilterVisible ? "" : styles.mobileFilter} ${styles.sortButton} glassCard`} onClick={toggleFilters}>
                         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor">
@@ -244,6 +257,7 @@ function EventsPage(){
                     <Event key={index} event={event} />
                 ))}
             </div>
+
         </div>
     )
 }

src/pages/Events/EventsPage.module.css

@@ -1,5 +1,6 @@
 .eventsContainer {
     width: 100%;
+    position: relative;
 }
 
 
@@ -34,7 +35,7 @@
 }
 
 
-.createButton, .sortButton {
+.createButton, .searchButton, .sortButton {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -50,25 +51,28 @@
     color: #019AFF;
 }
 
-.sortButton svg {
+.sortButton svg, .searchButton svg {
     transform: scale(0.8);
     fill: #019AFF;
 }
 
-.sortButton:hover {
+.createButton:hover, .searchButton:hover, .mobileFilter:hover {
+    transform: translateY(-5px);
     cursor: pointer;
 }
 
-.createButton:hover, .mobileFilter:hover {
-    transform: translateY(-5px);
-}
 
-
-.sortButton:focus {
+.sortButton:focus, .searchButton:focus {
     outline: none;
 }
-.sortButton:focus-visible {
-    outline: 2px solid black;
+
+
+
+.searchBar {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
 }
 
 
@@ -92,7 +96,7 @@
         width: fit-content;
     }
 
-    .createButton:hover, .mobileFilter:hover {
+    .createButton:hover, .searchButton:hover, .mobileFilter:hover {
         transform: none !important;
     }
 }