import { Combobox } from "@headlessui/react"; import clsx from "clsx"; import type { ReactNode } from "react"; import { useState } from "react"; import { HiCheck, HiChevronDown } from "react-icons/hi2"; interface Props { label: string; items: T[]; value: T | undefined; valueMapper: (e: T) => string; onChange: (value: T) => void; icon?: ReactNode; } const Combo = ({ items, ...props }: Props) => { const [query, setQuery] = useState(""); const filtered = query === "" ? items : items.filter((e) => props.valueMapper(e).toLowerCase().includes(query.toLowerCase())); return ( {props.icon} {props.label}
setQuery(event.target.value)} displayValue={(e) => props.valueMapper(e as T)} /> {filtered.length > 0 && ( {filtered.map((e, i) => ( clsx( "relative cursor-default select-none py-2 pl-3 pr-9 ", active ? "hover:bg-slate-3" : "text-slate-12" ) } > {({ selected }) => ( <> {props.valueMapper(e)} {selected && ( )} )} ))} )}
); }; export default Combo;