Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | 4x | import { Grid, Stack } from "@mui/material";
import { RHFInput } from "@common/Input";
import { MAX_TEXT_LENGTH } from "@constants/constants";
import { useFormContext } from "react-hook-form";
import { ModalSectionTitleProps } from "./atoms";
import FadeUpWrapper from "@components/animation/FadeUpWrapper";
type FundraisersAboutProps = ModalSectionTitleProps & {
isEdit?: boolean;
fontSize?: number | string;
placeHolderText?: string;
mobileFontSize?: number | string;
};
const FundraisersAbout = ({
title,
titleSize = "large",
isEdit = false,
fontSize,
mobileFontSize,
placeHolderText,
}: FundraisersAboutProps) => {
const { watch } = useFormContext();
const values = watch();
return (
<Stack direction="column" gap={isEdit ? 2 : 4} flexGrow={1}>
<FadeUpWrapper delay={200}>
<Grid container spacing={1}>
<Grid item xs={12}>
<RHFInput
name="about.title"
label="Title"
placeholder="Enter a suitable title"
inputProps={{ maxLength: 300 }}
fullWidth
/>
</Grid>
<Grid item xs={12}>
<RHFInput
name="about.description"
label="Description (recommended)"
placeholder={placeHolderText}
multiline
rows={8}
fullWidth
inputProps={{
maxLength: `${MAX_TEXT_LENGTH}`,
}}
helperText={`${
MAX_TEXT_LENGTH - values?.about?.description?.length
}`}
/>
</Grid>
</Grid>
</FadeUpWrapper>
</Stack>
);
};
export default FundraisersAbout;
|