67 lines
2.4 KiB
TypeScript
67 lines
2.4 KiB
TypeScript
|
import {Box, Typography, useTheme} from "@mui/material";
|
||
|
|
import {useRootContainerSize} from "@contexts/RootContainerWidthContext.ts";
|
||
|
|
import {QuizSettingsConfig} from "@model/settingsData.ts";
|
||
|
|
import {FC} from "react";
|
||
|
|
|
||
|
|
type ContactTextBlockProps = {
|
||
|
|
settings: QuizSettingsConfig;
|
||
|
|
}
|
||
|
|
|
||
|
|
export const ContactTextBlock: FC<ContactTextBlockProps> = ({settings}) => {
|
||
|
|
const theme = useTheme();
|
||
|
|
const isMobile = useRootContainerSize() < 850;
|
||
|
|
const isTablet = useRootContainerSize() < 1000;
|
||
|
|
return (
|
||
|
|
<Box
|
||
|
|
sx={{
|
||
|
|
flexGrow: 1,
|
||
|
|
display: "flex",
|
||
|
|
flexDirection: "column",
|
||
|
|
alignItems: "center",
|
||
|
|
justifyContent: "center",
|
||
|
|
borderRight: isMobile ? undefined : "1px solid #9A9AAF80",
|
||
|
|
margin: isMobile ? 0 : "40px 0",
|
||
|
|
padding: isMobile ? "0" : "0 40px"
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Box
|
||
|
|
sx={{
|
||
|
|
maxWidth: isMobile? "100%" : isTablet? "410px" : "630px",
|
||
|
|
display: "flex",
|
||
|
|
flexDirection: "column",
|
||
|
|
alignItems: "flex-start",
|
||
|
|
justifyContent: "center",
|
||
|
|
padding: isMobile ? "40px 20px 0 20px" : "0",
|
||
|
|
mt: isMobile ? 0 : isTablet ? "-180px" : "-47px",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Typography
|
||
|
|
sx={{
|
||
|
|
textAlign: isTablet ? undefined : "center",
|
||
|
|
fontSize: "24px",
|
||
|
|
lineHeight: "normal",
|
||
|
|
fontWeight: 501,
|
||
|
|
color: theme.palette.text.primary,
|
||
|
|
wordBreak: "break-word",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{settings.cfg.formContact.title ||
|
||
|
|
"Заполните форму, чтобы получить результаты теста"}
|
||
|
|
</Typography>
|
||
|
|
{settings.cfg.formContact.desc && (
|
||
|
|
<Typography
|
||
|
|
sx={{
|
||
|
|
color: theme.palette.text.primary,
|
||
|
|
m: "20px 0",
|
||
|
|
fontSize: "18px",
|
||
|
|
wordBreak: "break-word",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{settings.cfg.formContact.desc}
|
||
|
|
</Typography>
|
||
|
|
)}
|
||
|
|
</Box>
|
||
|
|
</Box>
|
||
|
|
)
|
||
|
|
}
|