41 lines
1,008 B
TypeScript
41 lines
1,008 B
TypeScript
/**
|
|
* A customizable input field
|
|
* @param props - Settings for the field
|
|
* @returns {JSX.Element} The input field
|
|
* @example
|
|
* <InputField
|
|
* type="text"
|
|
* label="Example"
|
|
* onChange={(e) => {
|
|
* setExample(e.target.value);
|
|
* }}
|
|
* value={example}
|
|
* />
|
|
*/
|
|
function InputField(props: {
|
|
label: string;
|
|
type: string;
|
|
value: string;
|
|
onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
|
}): JSX.Element {
|
|
return (
|
|
<div className="mb-4">
|
|
<label
|
|
className="block text-gray-700 text-sm font-sans font-bold mb-2"
|
|
htmlFor={props.label}
|
|
>
|
|
{props.label}
|
|
</label>
|
|
<input
|
|
className="appearance-none border-2 border-black rounded-2xl w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
|
|
id={props.label}
|
|
type={props.type}
|
|
placeholder={props.label}
|
|
value={props.value}
|
|
onChange={props.onChange}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default InputField;
|