36 lines
1009 B
TypeScript
36 lines
1009 B
TypeScript
import React from 'react';
|
|
|
|
interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
|
|
label?: string;
|
|
error?: string;
|
|
}
|
|
|
|
export default function Input({
|
|
label,
|
|
error,
|
|
className = '',
|
|
...props
|
|
}: InputProps) {
|
|
const baseClasses = "block w-full px-4 py-2 text-sm border rounded-md transition-colors duration-200 outline-none focus:ring-2 focus:ring-black/5 dark:focus:ring-white/10";
|
|
const stateClasses = error
|
|
? "border-red-500 text-red-900 placeholder-red-300"
|
|
: "border-gray-200 focus:border-black dark:border-neutral-800 dark:focus:border-white bg-transparent";
|
|
|
|
return (
|
|
<div className="space-y-1">
|
|
{label && (
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-neutral-300">
|
|
{label}
|
|
</label>
|
|
)}
|
|
<input
|
|
className={`${baseClasses} ${stateClasses} ${className}`}
|
|
{...props}
|
|
/>
|
|
{error && (
|
|
<p className="text-xs text-red-500">{error}</p>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|