feat: cleaner Départements Select

package.json

@@ -12,6 +12,7 @@
     "@emotion/react": "^11.10.5",
     "@mantine/core": "^5.10.3",
     "@mantine/hooks": "^5.10.3",
+    "@tabler/icons-react": "^2.2.0",
     "public-google-sheets-parser": "^1.2.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/routes/ListeResistants.tsx

@@ -2,7 +2,8 @@ import React from "react";
 import { Outlet, useLoaderData } from "react-router";
 import {ResistantRow} from "./ResistantRow";
 import {Resistant} from "../Resistant";
-import {Select} from "@mantine/core";
+import {Group, Select} from "@mantine/core";
+import { IconMapPin } from "@tabler/icons-react";
 
 export const resistantsLoader = async () => {
     const spreadsheetId = '1GL1MBChnwNn0t8WtKK5M3PbtCJ_bTJRhoTwAI9jeWck'
@@ -13,28 +14,36 @@ export const resistantsLoader = async () => {
 }
 
 function FiltreDepartement(props: { onChange:  (value: string) => void }) {
-    return <Select label="Département" placeholder="Filtrer par département" onChange={props.onChange} data={[
-        {label:"Ariège", value: "Ariège"},
-        {label:"Ardèche", value:"Ardèche"},
-        {label:"Aude", value:"Aude"},
-        {label:"Aveyron", value:"Aveyron"},
-        {label:"Creuse", value:"Creuse"},
-        {label:"Deux-Sèvres", value:"Deux-Sèvres"},
-        {label:"Haute-Garonne", value:"Haute-Garonne"},
-        {label:"Haute-Savoie", value:"Haute-Savoie"},
-        {label:"Haute-Vienne", value:"Haute-Vienne"},
-        {label:"Ille-et-Vilaine", value:"Ille-et-Vilaine"},
-        {label:"Loire-Atlantique", value:"Loire-Atlantique"},
-        {label:"Lot", value:"Lot"},
-        {label:"Maine-et-Loire", value:"Maine-et-Loire"},
-        {label:"Meurthe-et-Moselle", value:"Meurthe-et-Moselle"},
-        {label:"Morbihan", value:"Morbihan"},
-        {label:"Puy-de-Dôme", value:"Puy-de-Dôme"},
-        {label:"Seine-et-Marne", value:"Seine-et-Marne"},
-        {label:"Tarn", value:"Tarn"},
-        {label:"Vaucluse", value:"Vaucluse"},
-        {label:"Vendée", value:"Vendée"},
-    ]} />
+    return <Select
+        placeholder="Filtrer par département"
+        onChange={props.onChange}
+        clearable
+        searchable
+        nothingFound="Aucun résistant ici"
+        icon={<IconMapPin/>}
+        data={[
+            {label:"Ariège", value: "Ariège"},
+            {label:"Ardèche", value:"Ardèche"},
+            {label:"Aude", value:"Aude"},
+            {label:"Aveyron", value:"Aveyron"},
+            {label:"Creuse", value:"Creuse"},
+            {label:"Deux-Sèvres", value:"Deux-Sèvres"},
+            {label:"Haute-Garonne", value:"Haute-Garonne"},
+            {label:"Haute-Savoie", value:"Haute-Savoie"},
+            {label:"Haute-Vienne", value:"Haute-Vienne"},
+            {label:"Ille-et-Vilaine", value:"Ille-et-Vilaine"},
+            {label:"Loire-Atlantique", value:"Loire-Atlantique"},
+            {label:"Lot", value:"Lot"},
+            {label:"Maine-et-Loire", value:"Maine-et-Loire"},
+            {label:"Meurthe-et-Moselle", value:"Meurthe-et-Moselle"},
+            {label:"Morbihan", value:"Morbihan"},
+            {label:"Puy-de-Dôme", value:"Puy-de-Dôme"},
+            {label:"Seine-et-Marne", value:"Seine-et-Marne"},
+            {label:"Tarn", value:"Tarn"},
+            {label:"Vaucluse", value:"Vaucluse"},
+            {label:"Vendée", value:"Vendée"},
+        ]}
+    />
 }
 
 const normalize = (text: string) => (text || "")
@@ -52,9 +61,12 @@ export const ListeResistants = () => {
     return (
         <>
             <div id="listeResistants">
-                Nom: <input type="text" name="nom" value={nom} onChange={filtreNom}/>
-                &nbsp;
-                <FiltreDepartement onChange={setDepartement}/>
+                <Group>
+                    Nom: <input type="text" name="nom" value={nom} onChange={filtreNom}/>
+                    &nbsp;
+                    <FiltreDepartement onChange={setDepartement}/>
+                </Group>
+
                 {resistants
                     .filter(r => !nom || normalize(r.noms).includes(normalize(nom.toLowerCase())))
                     .filter(r => !departement || normalize(r.departement).includes(normalize(departement)))

yarn.lock

@@ -730,6 +730,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tabler/icons-react@npm:^2.2.0":
+  version: 2.2.0
+  resolution: "@tabler/icons-react@npm:2.2.0"
+  dependencies:
+    "@tabler/icons": 2.2.0
+    prop-types: ^15.7.2
+  peerDependencies:
+    react: ^16.5.1 || ^17.0.0 || ^18.0.0
+  checksum: 9bde60900907f0876a2127b183a67da635ec5e8214897652a8ba114981a653cd0bfa3a0393f7cbee659af536ae7c6e2ffa395355583f2d5ec2e224673559facc
+  languageName: node
+  linkType: hard
+
+"@tabler/icons@npm:2.2.0":
+  version: 2.2.0
+  resolution: "@tabler/icons@npm:2.2.0"
+  checksum: 8240c3930979304cd6800a70b35efbb40931831f787df4a658ef8c42ded6cc1b001dfb9b15af0d61d074701220e91161918ff1757d3c98f19d120ee39e964753
+  languageName: node
+  linkType: hard
+
 "@tootallnate/once@npm:2":
   version: 2.0.0
   resolution: "@tootallnate/once@npm:2.0.0"
@@ -1843,7 +1862,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prop-types@npm:^15.8.1":
+"prop-types@npm:^15.7.2, prop-types@npm:^15.8.1":
   version: 15.8.1
   resolution: "prop-types@npm:15.8.1"
   dependencies:
@@ -1964,6 +1983,7 @@ __metadata:
     "@emotion/react": ^11.10.5
     "@mantine/core": ^5.10.3
     "@mantine/hooks": ^5.10.3
+    "@tabler/icons-react": ^2.2.0
     "@types/react": ^18.0.26
     "@types/react-dom": ^18.0.9
     "@vitejs/plugin-react-swc": ^3.0.0