MattrixwvReactComponents/lib/component/input/SelectInput.tsx

import type { SelectInputProps } from "$/types/Input";
import { Listbox, ListboxButton, ListboxOptions } from "@headlessui/react";
import clsx from "clsx";
import { BsChevronDown } from "react-icons/bs";


export default function SelectInput(props: SelectInputProps){
	const {
		label,
		value,
		onChange,
		children
	} = props;


	return (
		<Listbox
			value={value}
			onChange={onChange}
		>
			<ListboxButton
				className={clsx(
					"group relative flex flex-row items-center justify-between w-full",
					"border-2 px-2 py-1 rounded-lg"
					//"not-data-open:rounded-lg data-open:rounded-t-lg"
				)}
			>
				<span>{label}</span>
				<span className="block group-data-open:rotate-180 transition-transform duration-250"><BsChevronDown size={22}/></span>
			</ListboxButton>
			<ListboxOptions
				className="w-(--button-width) max-h-60! overflow-hidden z-10 outline-none rounded-lg"
				anchor="bottom"
			>
				{children}
			</ListboxOptions>
		</Listbox>
	);
}