Abstract to allow for different select components

src/App.tsx

@@ -4,7 +4,7 @@ import Select, {createFilter, MenuListProps} from "react-select";
 import * as R from 'ramda';
 
 import {useQuery} from "@tanstack/react-query";
-import {Alias, CustomAlias, LinkCollection, Option} from "./aliases";
+import {LinkCollection, Option} from "./aliases";
 
 // TODO: Fix this for wrapping items, esp on phones
 const height = 35;
@@ -36,7 +36,9 @@ function MenuList(props: MenuListProps) {
     </List>);
 }
 
-export function LargeSelect() {
+function NaiveSelect({setSelected}: {
+    setSelected: (value: Option) => void
+}) {
     const {
         data: options,
         isLoading,
@@ -55,25 +57,31 @@ export function LargeSelect() {
         },
     });
 
-    const [selected, setSelected] = useState<Option | null>(null);
-
     const onChange = useCallback((value: Option) => {
         setSelected(value);
         navigator.clipboard.writeText(`[[${value.label}]]`)
     }, []);
 
+    return (
+        <Select
+            classNames={{input: () => 'select-input-wrapper'}}
+            onChange={onChange as any}
+            components={{MenuList}}
+            isDisabled={isLoading}
+            isLoading={isLoading}
+            isClearable={true}
+            options={options}
+            filterOption={createFilter({ignoreAccents: false})}
+        />
+    )
+}
+
+export function LargeSelect() {
+    const [selected, setSelected] = useState<Option | null>(null);
+
     return (
         <div className={"m-5 text-lg"}>
-            <Select
+            <NaiveSelect setSelected={setSelected}/>
-                classNames={{input: () => 'select-input-wrapper'}}
-                onChange={onChange as any}
-                components={{MenuList}}
-                isDisabled={isLoading}
-                isLoading={isLoading}
-                isClearable={true}
-                options={options}
-                filterOption={createFilter({ignoreAccents: false})}
-            />
 
             {selected && <LinkCollection selected={selected}/>}
         </div>