Most simple components created

lib/component/input/SelectInput.tsx

@@ -0,0 +1,41 @@
+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}
+		>
+			<div
+				className="relative w-full"
+			>
+				<ListboxButton
+					className={clsx(
+						"flex flex-row items-center justify-between w-full",
+						"outline rounded px-2 py-1"
+					)}
+				>
+					<span>{label}</span>
+					<span><BsChevronDown size={22}/></span>
+				</ListboxButton>
+				<ListboxOptions
+					className="absolute w-full max-h-60 overflow-scroll z-10 outline-none"
+				>
+					{children}
+				</ListboxOptions>
+			</div>
+		</Listbox>
+	);
+}