Input

Code

"use client"

import { forwardRef } from "react"
import type { InputHTMLAttributes } from "react"

export type InputProps = {
	className?: string
	theme?: "normal" | "valid" | "error"
	onChange?: (event: string) => void
} & Omit<InputHTMLAttributes<HTMLInputElement>, "onChange">

const Input = forwardRef<HTMLInputElement, InputProps>(({ className, onChange, theme = "normal", type, ...inputAttributes }, ref) => {
	const baseClassName =
		"block w-full rounded-md apperance-none shadow-sm border bg-transparent px-3 py-2 text-sm ring-offset-0.5 ring-1 ring-transparent transition-colors focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
	const themeClassName = {
		normal: "border-gray-300 focus-visible:ring-gray-300",
		valid: "border-green-500 focus-visible:ring-green-500",
		error: "border-red-500 focus-visible:ring-red-500",
	}

	const filteredClassName = [baseClassName, themeClassName[theme], className].filter((element) => !!element).join(" ")

	return <input className={filteredClassName} onChange={(event) => onChange?.(event.target.value)} ref={ref} type={type || "text"} {...inputAttributes} />
})

export default Input