43 lines
1 KiB
TypeScript
43 lines
1 KiB
TypeScript
/**
|
|
* A customizable input field
|
|
* @param props - Settings for the field
|
|
* @returns {JSX.Element} The input field
|
|
* @example
|
|
* <InputField
|
|
* label="Example"
|
|
* placeholder="New placeholder"
|
|
* type="text"
|
|
* value={example}
|
|
* onChange={(e) => {
|
|
* setExample(e.target.value);
|
|
* }}
|
|
* />
|
|
*/
|
|
function InputField(props: {
|
|
label?: string;
|
|
placeholder?: string;
|
|
type?: string;
|
|
value?: string;
|
|
onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
|
}): JSX.Element {
|
|
return (
|
|
<div className="">
|
|
<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.placeholder}
|
|
value={props.value}
|
|
onChange={props.onChange}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default InputField;
|