From 33a7f16be4ed6baf1bafff9210dd8ee4975b238a Mon Sep 17 00:00:00 2001
From: Giovanni-Josserand <josserand.giovanni@gmail.com>
Date: Mon, 24 Nov 2025 08:37:04 +0100
Subject: [PATCH] initialize searchBar component

---
 public/search.svg                             |  1 +
 src/components/SearchBar/SearchBar.jsx        | 23 ++++++++++++++++
 src/components/SearchBar/SearchBar.module.css |  0
 src/pages/Events/EventsPage.jsx               | 16 +++++++++++-
 src/pages/Events/EventsPage.module.css        | 26 +++++++++++--------
 5 files changed, 54 insertions(+), 12 deletions(-)
 create mode 100644 public/search.svg
 create mode 100644 src/components/SearchBar/SearchBar.jsx
 create mode 100644 src/components/SearchBar/SearchBar.module.css

diff --git a/public/search.svg b/public/search.svg
new file mode 100644
index 0000000..f0d166f
--- /dev/null
+++ b/public/search.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><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>
\ No newline at end of file
diff --git a/src/components/SearchBar/SearchBar.jsx b/src/components/SearchBar/SearchBar.jsx
new file mode 100644
index 0000000..b984cb9
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/src/components/SearchBar/SearchBar.module.css b/src/components/SearchBar/SearchBar.module.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/pages/Events/EventsPage.jsx b/src/pages/Events/EventsPage.jsx
index f547b45..2d8e636 100644
--- a/src/pages/Events/EventsPage.jsx
+++ b/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>
     )
 }
diff --git a/src/pages/Events/EventsPage.module.css b/src/pages/Events/EventsPage.module.css
index 9bff2ec..059e604 100644
--- a/src/pages/Events/EventsPage.module.css
+++ b/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;
     }
 }