Use MUI, structure change, fix API

frontend/components/Search.js

@@ -0,0 +1,68 @@
+import { useEffect, useState } from 'react';
+import InputAdornment from '@mui/material/InputAdornment';
+import TextField from '@mui/material/TextField';
+import Search from '@mui/icons-material/Search';
+
+function Component({callback}) {
+  const [searchValue, setSearchValue] = useState("");
+
+  const updateSearch = event => {
+    var value = event.target.value;
+    setSearchValue(value);
+    parseSearch(value);
+  }
+
+  const parseSearch = value => {
+    var zip = 0;
+    var findZip = value.match(/[0-9]{4}/g);
+    if (findZip) {
+      zip = parseInt(findZip[0]);
+    }
+
+    var city = "";
+    var findCity = value.replace(/[0-9]/g, '');
+    if (findCity.length > 0) {
+      city = findCity.trim();
+    }
+
+    callback(value, zip, city);
+  }
+
+  useEffect(() => {
+    const paramsString = window.location.search;
+    const searchParams = new URLSearchParams(paramsString);
+    const value = searchParams.get("s");
+
+    if (value && value.length > 0) {
+      setSearchValue(value);
+      parseSearch(value);
+    }
+  }, []);
+
+  return (
+    <>
+      <TextField
+        label="Rechercher un code postal ou une localité"
+        variant="outlined"
+        onChange={updateSearch}
+        value={searchValue}
+        slotProps={{
+          input: {
+            startAdornment: (
+              <InputAdornment position="start">
+                <Search />
+              </InputAdornment>
+            )
+          }
+        }}
+        sx={{
+          width: "100%",
+          marginTop: "1.5rem",
+          marginBottom: "1.5rem"
+        }}
+      />
+    </>
+  );
+}
+
+export default Component;