:tada: Allow mech search by name

dev-front/src/App.css

@@ -24,6 +24,10 @@ header {
     width: 25%;
 }
 
+.mech-picker input {
+    display: block;
+}
+
 .custom-squad {
     /* Take the remaining width */
     flex-grow: 1;

dev-front/src/mech/MechPicker.tsx

@@ -1,14 +1,20 @@
-import React from 'react';
+import React, { useState } from 'react';
 import mechData from './mech-data.json'
 
 function MechPicker() {
+    const [searchText, setSearchText] = useState("");
+
     return (
-        <aside>
+        <aside className='mech-picker'>
             <h2>Mech picker</h2>
+            <label htmlFor='search-mech-input'>Search mech</label>
+            <input id='search-mech-input' type='text' placeholder='Mech name' value={searchText} onChange={event => setSearchText(event.target.value)}/>
             <ul>
-                {mechData.map(mech => (
-                    <li key={mech.id}>{mech.name}</li>
-                ))}
+                {mechData
+                    .filter(mech => mech.name.toLowerCase().includes(searchText.toLocaleLowerCase()))
+                    .map(mech => (
+                        <li key={mech.id}>{mech.name}</li>
+                    ))}
             </ul>
         </aside>
     );