import { Listbox } from "@headlessui/react" import { Label } from "../Label" import { SelectHeader, SelectOptions, Wrapper } from "./fragments" import { Option } from "./fragments/SelectOption" const getOptionByValue = (options: Option[], value?: string) => options.find(option => option.value === value) export type SelectProps = { options: Option[] value?: string placeholder?: string label?: string onChange: (value: string) => void } export const Select = ({ value, placeholder, onChange, options, label, }: SelectProps) => { const currentOption = getOptionByValue(options, value) return ( <Wrapper> <Label label={label}> <Listbox value={currentOption?.value} onChange={onChange}> {({ open }) => ( <> <SelectHeader label={currentOption?.label || placeholder} open={open} /> <SelectOptions options={options} /> </> )} </Listbox> </Label> </Wrapper> ) }