wehub-resource-sync
42 lines
1.1 KiB
TypeScript
42 lines
1.1 KiB
TypeScript
import { clsx } from "clsx";
|
|
import { InputHTMLAttributes, forwardRef } from "react";
|
|
|
|
interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
|
|
error?: string;
|
|
label?: string;
|
|
}
|
|
|
|
export const Input = forwardRef<HTMLInputElement, InputProps>(({
|
|
className,
|
|
error,
|
|
label,
|
|
...props
|
|
}, ref) => {
|
|
return (
|
|
<div className="space-y-2">
|
|
{label && (
|
|
<label className="text-sm font-medium text-gray-700 dark:text-gray-300">
|
|
{label}
|
|
</label>
|
|
)}
|
|
<input
|
|
ref={ref}
|
|
className={clsx(
|
|
"flex h-10 w-full rounded-md border border-gray-300 bg-white px-3 py-2",
|
|
"text-sm placeholder:text-gray-400",
|
|
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-400",
|
|
"disabled:cursor-not-allowed disabled:opacity-50",
|
|
"dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100",
|
|
error && "border-red-500 focus-visible:ring-red-500",
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
{error && (
|
|
<p className="text-sm text-red-500">{error}</p>
|
|
)}
|
|
</div>
|
|
);
|
|
});
|
|
|
|
Input.displayName = "Input";
|