replace <select> with react-select

adds search dropdown

app/package.json

@@ -30,6 +30,7 @@
     "react-responsive": "^9.0.2",
     "react-router-dom": "^6.4.5",
     "react-scripts": "5.0.1",
+    "react-select": "^5.8.0",
     "styled-components": "^5.3.6",
     "typescript": "^4.4.2",
     "web-vitals": "^2.1.0"

app/src/components/ContextPane.tsx

@@ -4,6 +4,7 @@ import { faEye, faEyeSlash, faCircleInfo } from '@fortawesome/free-solid-svg-ico
 import Dropdown from './ui/Dropdown';
 import { Cities } from '../libs/cities';
 import { RouteRecord } from '../hooks/useAvailableRoutes';
+import Select from './ui/Select';
 
 type Props = {
   availableProperties: Set<string>;
@@ -45,22 +46,14 @@ function ContextPane({
       className="bg-white w-full min-w-fit h-fit shadow flex flex-col sm:overflow-y-hidden sm:h-full sm:max-w-sm sm:w-1/5"
     >
       <div className="p-5 border-b border-b-slate-400">
-        <select
+        <Select
           onChange={e => {
-            setSelectedCity(e.target.value as Cities);
+            setSelectedCity(e.value as Cities);
           }}
           className="text-2xl"
           defaultValue={'New York City'}
-        >
-          {cities && cities.map(r => (
-            <option
-              key={r.city}
-              value={r.display_name}
-              selected={r.city === 'nyc'}>
-                {r.display_name}
-            </option>
-          ))}
-        </select>
+          options={cities ? cities.map(r => ({value: r.display_name, label: r.display_name})) : []}
+        />
       </div>
 
       <div className="px-4 space-y-4 pt-4 flex flex-col h-full sm:overflow-y-hidden">

app/src/components/ui/Select/index.tsx

@@ -0,0 +1,31 @@
+import type { ReactNode } from "react";
+import ReactSelect from 'react-select';
+
+type Props = {
+  children?: ReactNode;
+  className?: string;
+  onChange?: (e: any) => void;
+  defaultValue: string,
+  options: Array<any>
+};
+
+export default function Select({
+  children,
+  className,
+  onChange,
+  defaultValue,
+  options
+}: Props): JSX.Element {
+
+  return (
+    <ReactSelect
+        className={className}
+        onChange={onChange}
+        isLoading={options.length === 0}
+        defaultValue={defaultValue}
+        defaultInputValue={defaultValue}
+        placeholder={defaultValue}
+        options={options}
+     />
+  );
+}