Add filter to SearchableList.

src/components/SearchableList.tsx

@@ -12,13 +12,33 @@ interface ListProps<Item> {
 
 // TODO: Add search box.
 const SearchableList: FC<ListProps<Item>> = ({ component, map }) => {
+  const [filter, setFilter] = useState<string>("");
+
+  const onChange: ReactEventHandler = (event) => {
+    setFilter(event.target.value);
+  };
+
   const children = [];
   for (const name in map) {
-    children.push(<li key={name}>{component({ name, data: map[name] })}</li>);
+    if (name.includes(filter)) {
+      children.push(<li key={name}>{component({ name, data: map[name] })}</li>);
+    }
   }
 
   return (
     <div className="flex flex-col h-full px-3">
+      <form className="flex gap-3 p-3">
+        <label htmlFor="filter" className="self-center">
+          Filter:
+        </label>
+        <input
+          name="filter"
+          type="text"
+          className="text-input flex-grow"
+          value={filter}
+          onChange={onChange}
+        />
+      </form>
       <ul className="flex-grow flex flex-col">{children}</ul>
     </div>
   );