54 lines
1.3 KiB
TypeScript
54 lines
1.3 KiB
TypeScript
// src/components/ui/Input.tsx
|
|
import React from 'react';
|
|
import { clsx } from 'clsx';
|
|
|
|
interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
|
|
label?: string;
|
|
error?: string;
|
|
helperText?: string;
|
|
}
|
|
|
|
const Input: React.FC<InputProps> = ({
|
|
label,
|
|
error,
|
|
helperText,
|
|
className,
|
|
id,
|
|
...props
|
|
}) => {
|
|
const inputId = id || `input-${Math.random().toString(36).substr(2, 9)}`;
|
|
|
|
return (
|
|
<div className="w-full">
|
|
{label && (
|
|
<label
|
|
htmlFor={inputId}
|
|
className="block text-sm font-medium text-gray-700 mb-2"
|
|
>
|
|
{label}
|
|
</label>
|
|
)}
|
|
<input
|
|
id={inputId}
|
|
className={clsx(
|
|
'w-full px-4 py-3 border rounded-xl transition-all duration-200',
|
|
'placeholder-gray-400 text-gray-900',
|
|
'focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500',
|
|
error
|
|
? 'border-red-300 bg-red-50'
|
|
: 'border-gray-300 hover:border-gray-400',
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
{error && (
|
|
<p className="mt-1 text-sm text-red-600">{error}</p>
|
|
)}
|
|
{helperText && !error && (
|
|
<p className="mt-1 text-sm text-gray-500">{helperText}</p>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Input; |