frontend/app/components/TextInput.js

import Label from "./Label";

export const TextInput = ({ label, children, fieldProps, ...props }) => (
  <div className="relative">
    {label && <Label>{label}</Label>}
    <div className="relative rounded-lg shadow-sm">
      <input
        {...props}
        {...fieldProps}
        className="block w-full rounded-lg border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
      />
      <div className="absolute top-1 right-1 ">{children}</div>
    </div>
  </div>
);

export default TextInput;