this repo has no description
components: add dropdown
+48
+48
app/src/components/Dropdown.tsx
+48
app/src/components/Dropdown.tsx
···
1
+
import { Menu } from '@ark-ui/solid';
2
+
import { Index, Match, Switch } from 'solid-js';
3
+
import type { Component, JSX } from 'solid-js';
4
+
5
+
type DropdownItem = { type?: 'item'; value: string; component: JSX.Element };
6
+
type DropdownSep = { type: 'separator' };
7
+
8
+
type Props = {
9
+
trigger: Component;
10
+
items: Array<DropdownItem | DropdownSep>;
11
+
};
12
+
13
+
export function Dropdown(props: Props) {
14
+
return (
15
+
<Menu.Root>
16
+
<Menu.Trigger asChild={(p) => <props.trigger {...p} />} />
17
+
<Menu.Positioner>
18
+
<Menu.Content class="bg-background text-text border border-border p-2 rounded-lg min-w-[200px]">
19
+
<Index each={props.items}>
20
+
{(acc) => {
21
+
const item = acc();
22
+
return (
23
+
<Switch>
24
+
<Match when={item.type === 'separator'}>
25
+
<Menu.Separator />
26
+
</Match>
27
+
28
+
<Match
29
+
when={!item.type || item.type === 'item' ? item : undefined}
30
+
>
31
+
{(matched) => (
32
+
<Menu.Item
33
+
value={matched().value}
34
+
class="focus-ring px-3 data-highlighted:bg-zinc-800 py-2 cursor-pointer rounded"
35
+
>
36
+
{matched().component}
37
+
</Menu.Item>
38
+
)}
39
+
</Match>
40
+
</Switch>
41
+
);
42
+
}}
43
+
</Index>
44
+
</Menu.Content>
45
+
</Menu.Positioner>
46
+
</Menu.Root>
47
+
);
48
+
}