src/components/shared/Input.js (view raw)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
import { forwardRef } from "react"; const Input = forwardRef(({ label, error, ...props }, ref) => { return ( <div className="w-full"> {label && ( <label className="block text-sm font-medium mb-1">{label}</label> )} <input ref={ref} className={`w-full appearance-none rounded-md border px-2.5 py-1.5 shadow-sm outline-none transition bg-white text-gray-900 placeholder-gray-400 focus:ring-2 focus:ring-blue-200 focus:border-blue-500 ${error ? "border-red-500" : "border-gray-300"}`} {...props} /> {error && <p className="mt-1 text-sm text-red-500">{error}</p>} </div> ); }); Input.displayName = "Input"; export default Input; |