Most simple components created

lib/component/input/OptionInput.tsx

@@ -0,0 +1,27 @@
+import type { OptionInputProps } from "$/types/Input";
+import { ListboxOption } from "@headlessui/react";
+import clsx from "clsx";
+
+
+export default function OptionInput(props: OptionInputProps){
+	const {
+		id,
+		className,
+		value,
+		children
+	} = props;
+
+
+	return (
+		<ListboxOption
+			id={id}
+			className={clsx(
+				"cursor-pointer",
+				className
+			)}
+			value={value}
+		>
+			{children}
+		</ListboxOption>
+	);
+}

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>
+	);
+}

lib/component/input/TextInput.tsx

@@ -0,0 +1,57 @@
+import type { TextInputProps } from "$/types/Input";
+import clsx from "clsx";
+
+
+export default function TextInput(props: TextInputProps){
+	const {
+		id,
+		className,
+		inputClassName,
+		labelClassName,
+		placeholder,
+		defaultValue,
+		value,
+		onChange,
+		disabled
+	} = props;
+
+
+	return (
+		<div
+			className={clsx(
+				"flex flex-row items-center justify-center rounded-lg border-2",
+				className
+			)}
+		>
+			<div
+				className="relative flex flex-row items-center justify-center px-2 py-1"
+			>
+				<input
+					type="text"
+					id={id}
+					className={clsx(
+						"peer bg-transparent outline-none placeholder-transparent",
+						inputClassName
+					)}
+					placeholder={placeholder}
+					defaultValue={defaultValue}
+					value={value}
+					onChange={onChange}
+					disabled={disabled}
+				/>
+				<label
+					className={clsx(
+						"absolute ml-2 -top-3 left-0 text-sm rounded-md px-1 select-none cursor-default",
+						"peer-placeholder-shown:top-0 peer-placeholder-shown:-left-1 peer-placeholder-shown:text-inherit peer-placeholder-shown:text-base peer-placeholder-shown:bg-transparent peer-placeholder-shown:h-full peer-placeholder-shown:cursor-text",
+						"flex items-center",
+						labelClassName
+					)}
+					style={{ transitionProperty: "top,, left, font-size, line-height", transitionTimingFunction: "cubic-bezier(0.4 0, 0.2, 1)", transitionDuration: "250ms" }}
+					htmlFor={id}
+				>
+					{placeholder}
+				</label>
+			</div>
+		</div>
+	);
+}

lib/component/input/switch/DangerSwitch.tsx

@@ -0,0 +1,7 @@
+export default function DangerSwitch(){
+	return (
+		<div>
+			Danger Switch
+		</div>
+	);
+}

lib/component/input/switch/DarkSwitch.tsx

@@ -0,0 +1,7 @@
+export default function DarkSwitch(){
+	return (
+		<div>
+			Dark Switch
+		</div>
+	);
+}

lib/component/input/switch/LightSwitch.tsx

@@ -0,0 +1,7 @@
+export default function LightSwitch(){
+	return (
+		<div>
+			Light Switch
+		</div>
+	);
+}

lib/component/input/switch/PlainSwitch.tsx

@@ -0,0 +1,7 @@
+export default function PlainSwitch(){
+	return (
+		<div>
+			Plain Switch
+		</div>
+	);
+}

lib/component/input/switch/PrimarySwitch.tsx

@@ -0,0 +1,7 @@
+export default function PrimarySwitch(){
+	return (
+		<div>
+			Primary Switch
+		</div>
+	);
+}

lib/component/input/switch/SecondarySwitch.tsx

@@ -0,0 +1,7 @@
+export default function SecondarySwitch(){
+	return (
+		<div>
+			Secondary Switch
+		</div>
+	);
+}

lib/component/input/switch/SuccessDangerSwitch.tsx

@@ -0,0 +1,7 @@
+export default function SuccessDangerSwitch(){
+	return (
+		<div>
+			Success Danger Switch
+		</div>
+	);
+}

lib/component/input/switch/SuccessSwitch.tsx

@@ -0,0 +1,7 @@
+export default function SuccessSwitch(){
+	return (
+		<div>
+			Success Switch
+		</div>
+	);
+}

lib/component/input/switch/Switch.tsx

@@ -0,0 +1,7 @@
+export default function Switch(){
+	return (
+		<div>
+			Switch
+		</div>
+	);
+}

lib/component/input/switch/TertiarySwitch.tsx

@@ -0,0 +1,7 @@
+export default function TertiarySwitch(){
+	return (
+		<div>
+			Tertiary Switch
+		</div>
+	);
+}

lib/component/input/switch/WarningSwitch.tsx

@@ -0,0 +1,7 @@
+export default function WarningSwitch(){
+	return (
+		<div>
+			Warning Switch
+		</div>
+	);
+}