50 lines
1.4 KiB
React
50 lines
1.4 KiB
React
import React from "react";
|
|
import "./descriptionTextField.css";
|
|
import { TextField } from "@mui/material";
|
|
import PropTypes from "prop-types";
|
|
import { useTheme } from "@mui/material";
|
|
|
|
/**
|
|
* @component
|
|
* @param {Object} props
|
|
* @param {function} props.onChange - The function to call when the text field changes (optional)
|
|
* @param {string} props.hintText - The hint text displayed within the text field (required)
|
|
* @param {boolean} props.hasError - A flag indicating if the text field has an error (required)
|
|
* @returns {JSX.Element} - Renders the description text field component
|
|
*/
|
|
const DescriptionTextField = ({ onChange, hintText, hasError }) => {
|
|
const theme = useTheme();
|
|
|
|
const fontLookup = {
|
|
default: theme.font.default.font,
|
|
};
|
|
|
|
const fontFamily = fontLookup["default"];
|
|
|
|
return (
|
|
<div
|
|
className="description-field-holder"
|
|
style={{ fontFamily: fontFamily }}
|
|
>
|
|
<div className="text-field-title">Description</div>
|
|
<TextField
|
|
onChange={onChange}
|
|
id="description-field-area"
|
|
error={hasError}
|
|
className="description-field-area"
|
|
multiline
|
|
rows={4}
|
|
placeholder="Enter a description..."
|
|
helperText={hintText}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
DescriptionTextField.propTypes = {
|
|
hintText: PropTypes.string.isRequired,
|
|
hasError: PropTypes.bool.isRequired,
|
|
};
|
|
|
|
export default DescriptionTextField;
|