this repo has no description
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

components: add dropdown

Clément 6ea6ae79 13eb1b5e

+48
+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 + }