102 lines
4.1 KiB
TypeScript
102 lines
4.1 KiB
TypeScript
import { Box, Link, Typography, useTheme } from "@mui/material";
|
||
import { updateQuiz } from "@root/quizes/actions";
|
||
import { useCurrentQuiz } from "@root/quizes/hooks";
|
||
import CustomTextField from "@ui_kit/CustomTextField";
|
||
import { ChangeEvent, useState } from "react";
|
||
|
||
export default function Extra() {
|
||
const theme = useTheme();
|
||
const [isExpanded, setIsExpanded] = useState(false);
|
||
const quiz = useCurrentQuiz();
|
||
|
||
const expandedHC = (bool: boolean) => {
|
||
setIsExpanded(bool);
|
||
};
|
||
|
||
const mutationOrgMetaHC = (event: ChangeEvent<HTMLInputElement>) => {
|
||
updateQuiz(quiz?.id, quiz => {
|
||
quiz.config.meta = event.target.value;
|
||
});
|
||
};
|
||
|
||
return (
|
||
<Box
|
||
sx={{
|
||
width: "100%",
|
||
paddingBottom: "15px",
|
||
overflow: "hidden",
|
||
boxShadow: `0px 100px 309px rgba(210, 208, 225, 0.24),
|
||
0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525),
|
||
0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066),
|
||
0px 12.5216px 38.6916px rgba(210, 208, 225, 0.12),
|
||
0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343),
|
||
0px 2.76726px 8.55082px rgba(210, 208, 225, 0.067
|
||
4749)`,
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{
|
||
width: "100%",
|
||
backgroundColor: "transparent",
|
||
}}
|
||
>
|
||
<Box
|
||
onClick={() => expandedHC(!isExpanded)}
|
||
sx={{
|
||
paddingTop: "15px",
|
||
paddingRight: "20px",
|
||
display: "flex",
|
||
alignItems: "center",
|
||
justifyContent: "space-between",
|
||
cursor: "pointer",
|
||
userSelect: "none",
|
||
}}
|
||
>
|
||
<Link
|
||
sx={{
|
||
mt: "20px",
|
||
fontSize: "16px",
|
||
lineHeight: "19px",
|
||
color: theme.palette.brightPurple.main,
|
||
textDecorationColor: theme.palette.brightPurple.main,
|
||
}}
|
||
>
|
||
Дополнительно
|
||
</Link>
|
||
</Box>
|
||
{isExpanded && quiz && (
|
||
<Box
|
||
sx={{
|
||
backgroundColor: "transparent",
|
||
gap: "15px",
|
||
paddingTop: "15px",
|
||
}}
|
||
>
|
||
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>
|
||
Mета заголовок
|
||
</Typography>
|
||
<CustomTextField
|
||
placeholder=""
|
||
text={quiz.config.meta}
|
||
onChange={mutationOrgMetaHC}
|
||
/>
|
||
<Typography
|
||
sx={{
|
||
mt: "20px",
|
||
fontSize: "16px",
|
||
lineHeight: "19px",
|
||
maxWidth: "80%",
|
||
color: theme.palette.grey3.main,
|
||
}}
|
||
>
|
||
Текст-заполнитель — это текст, который имеет Текст-заполнитель — это текст, который имеет
|
||
Текст-заполнитель — это текст, который имеет Текст-заполнитель — это текст, который имеет
|
||
Текст-заполнитель
|
||
</Typography>
|
||
</Box>
|
||
)}
|
||
</Box>
|
||
</Box>
|
||
);
|
||
}
|