add search bar to volunteer page

src/components/SearchBar/SearchBar.jsx

@@ -2,10 +2,14 @@ import styles from "./SearchBar.module.css"
 import {Link} from "react-router";
 import {useEffect, useState} from "react";
 import searchEvents from "../../utils/searchEvents.js";
+import searchUsers from "../../utils/searchUsers.js";
+import { useLocation } from "react-router-dom";
+
 
 function SearchBar() {
     const [searchQuery, setSearchQuery] = useState('');
     const [searchResults, setSearchResults] = useState([]);
+    const location = useLocation();
 
     useEffect(() => {
         const performSearch = async (query) => {
@@ -14,7 +18,15 @@ function SearchBar() {
                 return;
             }
 
-            const data = await searchEvents(query);
+            let data;
+
+            if (location.pathname.includes("events")) {
+                data = await searchEvents(query);
+            } else if (location.pathname.includes("volunteers")) {
+                data = await searchUsers(query);
+            }
+
+
             if (data) {
                 setSearchResults(data);
             } else {
@@ -34,7 +46,7 @@ function SearchBar() {
 
     return (
         <div className={`${styles.searchBarContainer} glassCard`}>
-            <form className={styles.searchBarForm} onSubmit={(event) => event.preventDefault()}>
+            <form className={styles.searchBarForm} onSubmit={(element) => element.preventDefault()}>
                 <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"/>
@@ -43,7 +55,7 @@ function SearchBar() {
                     type="text"
                     placeholder="Rechercher un événement"
                     value={searchQuery}
-                    onChange={(event) => setSearchQuery(event.target.value)}
+                    onChange={(element) => setSearchQuery(element.target.value)}
                 />
             </form>
 
@@ -55,18 +67,33 @@ function SearchBar() {
 
 
             {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" />
-                            )}
+                (location.pathname.includes("events")) ? (
+                    <Link to={`/event/` + result.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>
-                        <p>{result.name}</p>
-                    </div>
-                </Link>
+                    </Link>
+                ) : location.pathname.includes("volunteers") ? (
+                    <Link to={`/profile/` + result.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} {result.lastname}</p>
+                        </div>
+                    </Link>
+                ) : null
             ))}
         </div>
     );

src/components/SearchBar/SearchBar.module.css

@@ -4,6 +4,7 @@
     z-index: 100;
     width: 60%;
     background: #fff;
+    padding: 0.5rem;
 }
 
 .searchBarForm{