diff --git a/src/App.tsx b/src/App.tsx index 81d334b..8f3096b 100644 --- a/src/App.tsx +++ b/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 &&
-
- -
- - {selected.data.aliases?.map(alias => ( -
- -
- ))} - -
- -
-
} + {selected && } ) } diff --git a/src/aliases.tsx b/src/aliases.tsx index 2215e48..bd12c45 100644 --- a/src/aliases.tsx +++ b/src/aliases.tsx @@ -19,6 +19,26 @@ export interface Option { } } +export function LinkCollection({ selected }: { selected: Option }) { + return ( +
+
+ +
+ + {selected.data.aliases?.map(alias => ( +
+ +
+ ))} + +
+ +
+
+ ); +} + export function CustomAlias({selected}: { selected: Option }) {