| export default function Input({ | |
| label, | |
| type = 'text', | |
| value, | |
| onChange, | |
| placeholder, | |
| required = false, | |
| error | |
| }) { | |
| return ( | |
| <div className="mb-4"> | |
| {label && ( | |
| <label className="block text-sm font-medium text-gray-700 mb-2"> | |
| {label} | |
| {required && <span className="text-red-500 ml-1">*</span>} | |
| </label> | |
| )} | |
| <input | |
| type={type} | |
| value={value} | |
| onChange={(e) => onChange(e.target.value)} | |
| placeholder={placeholder} | |
| required={required} | |
| className={` | |
| w-full px-4 py-2 border rounded-lg | |
| focus:outline-none focus:ring-2 focus:ring-blue-500 | |
| ${error ? 'border-red-500' : 'border-gray-300'} | |
| `} | |
| /> | |
| {error && ( | |
| <p className="text-red-500 text-sm mt-1">{error}</p> | |
| )} | |
| </div> | |
| ) | |
| } | |