les filtres fonctionnent mais le ui est laid.

GrossesMitaines/grosses-mitaines-ui/src/components/Filters.js

@@ -1,16 +1,17 @@
 import { Form } from "react-bootstrap";
 import { useState } from "react";
+import {Button} from "react-bootstrap";
 
 const Filters = ({ onChange }) => {
 
     const [priceFilter, setPriceFilter] = useState("");
     const [stateFilter, setStateFilter] = useState("");
 
-    const handlePriceChange = (value) =>{
+    const handlePriceChange = (value) => {
         setPriceFilter(value);
     }
 
-    const handleStateChange = (value) =>{
+    const handleStateChange = (value) => {
         setStateFilter(value);
     }
 
@@ -61,7 +62,7 @@ const Filters = ({ onChange }) => {
                     </Form.Group>
                 </div>
                 <div className="filters-state-container">
-                <Form.Group>
+                    <Form.Group>
                         <div key="state-filter-radio" onChange={e => handleStateChange(e.target.value)}>
                             <Form.Check
                                 defaultChecked
@@ -72,7 +73,7 @@ const Filters = ({ onChange }) => {
                                 value=""
                             />
                             <Form.Check
-                                label="Displonible"
+                                label="Disponible"
                                 name="stateFilter"
                                 type='radio'
                                 id="state-available"
@@ -110,6 +111,9 @@ const Filters = ({ onChange }) => {
                     </Form.Group>
                 </div>
             </Form>
+            <Button onClick={() => { onChange(priceFilter, stateFilter) }} className='btn-filter'>
+                Filtrer
+            </Button>
         </div>
     )
 }