| import React from "react"; |
| import { cn } from "../../../lib/utils"; |
|
|
| const TextInput = ({ |
| label, |
| name, |
| type = "text", |
| required = false, |
| textarea = false, |
| value, |
| onChange, |
| error, |
| className, |
| ...props |
| }) => { |
| const inputClasses = cn( |
| "w-full px-4 py-2 text-sm bg-transparent border-b transition-colors", |
| error |
| ? "border-b border-red-500 focus:border-b-red-500" |
| : "border-b border-gray-500 hover:border-b-blue-500 focus:border-b-blue-500 outline-none", |
| className |
| ); |
|
|
| return ( |
| <div className="space-y-2 mb-6"> |
| <label className="text-sm text-gray-600 block mb-1"> |
| {label} |
| {required && <span className="text-red-500 ml-1">*</span>} |
| </label> |
| |
| {textarea ? ( |
| <textarea |
| className={inputClasses} |
| name={name} |
| required={required} |
| value={value} |
| onChange={onChange} |
| rows={4} |
| {...props} |
| /> |
| ) : ( |
| <input |
| className={inputClasses} |
| name={name} |
| type={type} |
| required={required} |
| value={value} |
| onChange={onChange} |
| {...props} |
| /> |
| )} |
| {error && <p className="text-red-500 text-sm mt-1">{error}</p>} |
| </div> |
| ); |
| }; |
|
|
| export default TextInput; |
|
|
