52 lines
1.5 KiB
TypeScript
52 lines
1.5 KiB
TypeScript
import { createSignal, For, Show } from "solid-js";
|
|
|
|
function Dropdown(props: {
|
|
options: { label: string; id: string }[];
|
|
selected: string | boolean;
|
|
onChange: (value: string | boolean) => void;
|
|
}) {
|
|
const [isOpen, setIsOpen] = createSignal(false);
|
|
|
|
const toggleDropdown = () => {
|
|
setIsOpen(!isOpen());
|
|
};
|
|
const selectOption = (option: { id: string; label: string }) => {
|
|
props.onChange(option.id);
|
|
setIsOpen(false);
|
|
};
|
|
|
|
return (
|
|
<div class="relative">
|
|
<div
|
|
class="max-w-64 block leading-tight cursor-pointer whitespace-nowrap overflow-hidden font-normal"
|
|
onClick={toggleDropdown}
|
|
>
|
|
<Show
|
|
when={props.options.find((option) => option.id === props.selected)}
|
|
fallback={<span>Select Microphone Source</span>}
|
|
>
|
|
{props.options.find((option) => option.id === props.selected)?.label}
|
|
</Show>
|
|
</div>
|
|
<Show when={isOpen()}>
|
|
<div
|
|
style="width:260px;max-height:120px;overflow:scroll;"
|
|
class="absolute z-10 w-full bg-white border shadow-sm rounded-lg mb-2 -left-4 text-start font-normal bottom-full"
|
|
>
|
|
<For each={props.options}>
|
|
{(option) => (
|
|
<div
|
|
class="px-4 py-2 hover:bg-gray-100 cursor-pointer"
|
|
onClick={() => selectOption(option)}
|
|
>
|
|
{option.label}
|
|
</div>
|
|
)}
|
|
</For>
|
|
</div>
|
|
</Show>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Dropdown;
|