Separate out LinkCollection

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, Option} from "./aliases";
+import {Alias, CustomAlias, LinkCollection, Option} from "./aliases";
 
 // TODO: Fix this for wrapping items, esp on phones
 const height = 35;
@@ -75,21 +75,7 @@ export function LargeSelect() {
                 filterOption={createFilter({ignoreAccents: false})}
             />
 
-            {selected && <div className={"mt-2"}>
+            {selected && <LinkCollection selected={selected}/>}
-                <div className="py-1">
-                    <Alias original={selected.label}/>
-                </div>
-
-                {selected.data.aliases?.map(alias => (
-                    <div className="py-1">
-                        <Alias original={selected.label} alias={alias}/>
-                    </div>
-                ))}
-
-                <div className="py-1">
-                    <CustomAlias selected={selected}/>
-                </div>
-            </div>}
         </div>
     )
 }

src/aliases.tsx

@@ -19,6 +19,26 @@ export interface Option {
     }
 }
 
+export function LinkCollection({ selected }: { selected: Option }) {
+    return (
+        <div className={"mt-2"}>
+            <div className="py-1">
+                <Alias original={selected.label}/>
+            </div>
+
+            {selected.data.aliases?.map(alias => (
+                <div className="py-1">
+                    <Alias original={selected.label} alias={alias}/>
+                </div>
+            ))}
+
+            <div className="py-1">
+                <CustomAlias selected={selected}/>
+            </div>
+        </div>
+    );
+}
+
 export function CustomAlias({selected}: {
     selected: Option
 }) {