From 3e298ebd3e317bd3ab95be796438552e485350f0 Mon Sep 17 00:00:00 2001
From: Pierre Ferreira <p.ferreira1@outlook.fr>
Date: Fri, 1 Dec 2023 15:28:34 +0100
Subject: [PATCH] =?UTF-8?q?ajout=20d'un=20slider=20personnalis=C3=A9=20pou?=
 =?UTF-8?q?r=20le=20trie=20des=20lobby=20:bento:?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 cryptide_project/src/Pages/Lobbies.tsx | 44 +++++++++++++++++++++++---
 1 file changed, 40 insertions(+), 4 deletions(-)

diff --git a/cryptide_project/src/Pages/Lobbies.tsx b/cryptide_project/src/Pages/Lobbies.tsx
index 6ab90c2..cb305af 100644
--- a/cryptide_project/src/Pages/Lobbies.tsx
+++ b/cryptide_project/src/Pages/Lobbies.tsx
@@ -36,7 +36,16 @@ function Lobbies() {
 
     const [searchTerm, setSearchTerm] = useState('');
 
-    const [showAvailable, setShowAvailable] = useState(false);
+    const [showAvailable, setShowAvailable] = useState(true);
+
+    const handleShowAllClick = () => {
+        setShowAvailable(false);
+    };
+    
+    const handleShowAvailableClick = () => {
+        setShowAvailable(true);
+    };
+
 
     const filteredLobbies = lobbyData.filter((lobby) =>
         lobby.roomNum.toLowerCase().includes(searchTerm.toLowerCase()) ||
@@ -83,13 +92,40 @@ function Lobbies() {
                 onChange={(e) => setSearchTerm(e.target.value)}
             />
 
-            <div>
+            {/* <div>
                 <button style={{borderColor:'whitesmoke', borderRadius:'15px 0px 0px 15px', padding:'5px'}}
                         onClick={() => setShowAvailable(false)}>Tous</button>
                 <button style={{borderColor:'whitesmoke', borderRadius:'0px 15px 15px 0px', padding:'5px'}}
                         onClick={() => setShowAvailable(true)}>Dispo</button>
-            </div>
-
+            </div> */}
+
+        <div style={{border:'solid 3px', borderColor:'lightgray', borderRadius:'20px', margin:'10px'}}>
+            <button
+                style={{
+                    border:'solid',
+                    borderStyle:'none',
+                    borderRadius: '15px 0px 0px 15px',
+                    borderWidth: '2px',
+                    padding: '10px 15px',
+                    backgroundColor: !showAvailable ? 'white' : 'lightgray',
+                }}
+                onClick={handleShowAllClick}
+            >
+                Tous
+            </button>
+            <button
+                style={{
+                    border:'solid',
+                    borderStyle:'none',
+                    borderRadius: '0px 15px 15px 0px',
+                    padding: '10px 15px',
+                    backgroundColor: showAvailable ? 'white' : 'lightgray',
+                }}
+                onClick={handleShowAvailableClick}
+            >
+                Disponible
+            </button>
+        </div>
 
 
             <div className="lobbyList">