28 lines
844 B
TypeScript
28 lines
844 B
TypeScript
|
import type { InputHTMLAttributes, HTMLAttributes, PropsWithChildren } from "react";
|
||
|
|
|
||
|
|
const formClasses =
|
||
|
|
"block w-full appearance-none rounded-md border border-gray-200 bg-gray-50 px-3 py-2 text-gray-900 placeholder-gray-400 focus:border-blue-500 focus:bg-white focus:outline-none focus:ring-blue-500 sm:text-sm";
|
||
|
|
|
||
|
|
function Label({ id, children }: PropsWithChildren<HTMLAttributes<HTMLLabelElement>>) {
|
||
|
|
return (
|
||
|
|
<label htmlFor={id} className="mb-3 block text-sm font-medium text-gray-700">
|
||
|
|
{children}
|
||
|
|
</label>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export function TextField({
|
||
|
|
id,
|
||
|
|
label,
|
||
|
|
type = "text",
|
||
|
|
className = "",
|
||
|
|
...props
|
||
|
|
}: InputHTMLAttributes<HTMLInputElement> & { label?: string }) {
|
||
|
|
return (
|
||
|
|
<div className={className}>
|
||
|
|
{label && <Label id={id}>{label}</Label>}
|
||
|
|
<input id={id} type={type} {...props} className={formClasses} />
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|