переход на страницу вопросов

src/assets/icons/AlignCenterIcon.tsx

@@ -0,0 +1,29 @@
+import { Box } from "@mui/material";
+
+
+interface Props {
+    color: string;
+}
+
+export default function AlignCenterIcon({ color }: Props) {
+
+    return (
+        <Box
+            sx={{
+                height: "32px",
+                width: "32px",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+            }}
+        >
+            <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M16 4V7" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+                <path d="M16 25V28" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+                <path d="M16 14V18" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+                <path d="M23 7H9C8.44772 7 8 7.44772 8 8V13C8 13.5523 8.44772 14 9 14H23C23.5523 14 24 13.5523 24 13V8C24 7.44772 23.5523 7 23 7Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+                <path d="M26 18H6C5.44772 18 5 18.4477 5 19V24C5 24.5523 5.44772 25 6 25H26C26.5523 25 27 24.5523 27 24V19C27 18.4477 26.5523 18 26 18Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+            </svg>
+        </Box>
+    );
+}

src/index.tsx

@@ -26,7 +26,7 @@ const routeslink: {path: string; page: JSX.Element; header: boolean; sidebar: bo
     {path: "/list-empty", page: <FirstQuiz/>, header: false, sidebar: false},
     {path: "/list-full", page: <MyQuizzesFull/>, header: false, sidebar: false},
     {path: "/list-short", page: <MyQuizzes/>, header: false, sidebar: false},
-    {path: "/questions", page: <QuestionsPage/>, header: true, sidebar: true},
+    {path: "/questions/:quizId", page: <QuestionsPage/>, header: true, sidebar: true},
     {path: "/contacts", page: <ContactFormPage/>, header: true, sidebar: true},
     {path: "/result", page: <Result/>, header: true, sidebar: true},
     {path: "/settings", page: <Setting />, header: true, sidebar: true},

src/pages/startPage/ModalSizeImage.tsx

@@ -1,4 +1,15 @@
-import {Button, Modal, Box, useTheme, Typography} from "@mui/material";
+import {
+    Button,
+    Modal,
+    Box,
+    useTheme,
+    Typography,
+    Table,
+    TableCell,
+    TableBody,
+    TableContainer,
+    TableRow,
+} from "@mui/material";
 import * as React from "react";
 import {useState} from "react";
 
@@ -7,6 +18,35 @@ export default function ModalSizeImage () {
     const [open, setOpen] = useState(false);
     const handleOpen = () => setOpen(true);
     const handleClose = () => setOpen(false);
+
+    function createData(
+        name: string,
+        size: string
+    ) {
+        return { name, size };
+    }
+
+    const rows = [
+        createData('Прямая ссылка/домен', "1792х1509 px"),
+        createData('Модальное окно', "1380х1300 px"),
+        createData('Во ВКонтакте', "1166х1200 px"),
+        createData('Версия для планшета', "767х220 px"),
+        createData('Мобильная версия', "400х220 px"),
+        createData('Картинка для дизайна Centered', "900х490 px"),
+        createData('Картинка для дизайна Expanded', "1920х1080 px"),
+    ];
+
+    const rows2 = [
+        createData('Вертикальный вариант', "180х240 px"),
+        createData('Квадратные', "240х240 px"),
+        createData('Варианты и картинка', "380х307 px"),
+        createData('Консультант', "140х140 px"),
+        createData('Логотип', "107х37 px"),
+        createData('Результаты',"1100х600 px"),
+        createData('Бонус', "200х60 px"),
+        createData('Картинка для формата вопроса "Страница"', "860х1250 px"),
+    ];
+
     return (
         <>
             <Button
@@ -39,14 +79,67 @@ export default function ModalSizeImage () {
                         p: 0,
                     }}
                 >
-                    <Box>
+                    <Box
+                        sx={{
+                            display: "flex",
+                            justifyContent: "space-between",
+                            alignItems: "center",
+                            backgroundColor: theme.palette.background.default,
+                            padding: "20px",
+                            borderRadius: "12px 12px 0px 0px"
+                        }}>
                         <Typography>Размеры картинок</Typography>
+                        <Button>x</Button>
                     </Box>
-                    <Box></Box>
+                    <Box sx={{padding: "15px 20px 30px"}}>
-                    <Box>
+                        <Box><Typography>Рекомендованный размер зависит от того, как вы будете чаще использовать квиз:</Typography></Box>
+                        <Box>
+                            <TableContainer component={Box}>
+                                <Table sx={{ minWidth: 500 }} size="small" aria-label="a dense table">
+                                    <TableBody>
+                                        {rows2.map((row) => (
+                                            <TableRow
+                                                key={row.name}
+                                                sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
+                                            >
+                                                <TableCell component="th" scope="row">
+                                                    {row.name}
+                                                </TableCell>
+                                                <TableCell align="right">{row.size}</TableCell>
+                                            </TableRow>
+                                        ))}
+                                    </TableBody>
+                                </Table>
+                            </TableContainer>
+
+                        </Box>
+                    </Box>
+
+                    <Box
+                        sx={{
+                            backgroundColor: theme.palette.background.default,
+                            padding: "20px"
+                        }}
+                    >
                         <Typography>Размеры изображений в квизе</Typography>
                     </Box>
-                    <Box></Box>
+                    <TableContainer component={Box}>
+                    <Table sx={{ minWidth: 500 }} size="small" aria-label="a dense table">
+                        <TableBody>
+                            {rows.map((row) => (
+                                <TableRow
+                                    key={row.name}
+                                    sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
+                                >
+                                    <TableCell component="th" scope="row">
+                                        {row.name}
+                                    </TableCell>
+                                    <TableCell align="right">{row.size}</TableCell>
+                                </TableRow>
+                            ))}
+                        </TableBody>
+                    </Table>
+                </TableContainer>
                 </Box>
             </Modal>
         </>

src/pages/startPage/SelectableIconButton.tsx

@@ -1,12 +1,13 @@
-import {Button, useTheme} from "@mui/material";
+import {Button, SxProps, Theme, useTheme} from "@mui/material";
 
 interface Props {
     Icon: React.ElementType;
     isActive?: boolean;
     onClick: () => void;
+    sx?: SxProps<Theme>;
 }
 
-export default function SelectableIconButton({ Icon, isActive = false, onClick }: Props) {
+export default function SelectableIconButton({ Icon, isActive = false, onClick, sx }: Props) {
     const theme = useTheme();
 
     return (
@@ -28,6 +29,7 @@ export default function SelectableIconButton({ Icon, isActive = false, onClick }
                 "&:hover": {
                     borderColor: isActive ? theme.palette.brightPurple.main : theme.palette.grey2.main,
                 },
+                ...sx
             }}
         />
     );

src/pages/startPage/StartPageSettings.tsx

@@ -26,10 +26,12 @@ import SelectableIconButton from "./SelectableIconButton";
 import UploadBox from "@ui_kit/UploadBox";
 import CustomTextField from "@ui_kit/CustomTextField";
 import {quizStore} from "@root/quizes";
-import {useParams} from "react-router-dom";
+import {useNavigate, useParams} from "react-router-dom";
 import * as React from "react";
 import ModalSizeImage from "./ModalSizeImage";
 import DropZone from "./dropZone";
+import Extra from "./extra";
+import AlignCenterIcon from "@icons/AlignCenterIcon";
 
 
 const designTypes = [
@@ -40,11 +42,12 @@ const designTypes = [
 // type DesignType = typeof designTypes[number][0];
 
 type BackgroundType = "image" | "video";
-type AlignType = "left" | "right";
+type AlignType = "left" | "right" | "center";
 
 export default function StartPageSettings() {
     const {listQuizes, updateQuizesList, removeQuiz, createBlank} = quizStore();
     const params = Number(useParams().quizId);
+    const navigate = useNavigate()
     const theme = useTheme();
     const designType = listQuizes[params].startpage
     const StartPageClone = listQuizes[params]
@@ -95,9 +98,9 @@ export default function StartPageSettings() {
         updateQuizesList(params, {config: SPageClone })
     }
 
-    const mutationOrgMetaHC = (e: any) => {
+    const mutationPositionHC = (e: any) => {
         let SPageClone = listQuizes[params].config
-        SPageClone.meta = e.target.value
+        SPageClone.startpage.position = e.target.value
         updateQuizesList(params, {config: SPageClone })
     }
 
@@ -311,8 +314,24 @@ export default function StartPageSettings() {
                         display: "flex",
                         gap: "10px",
                     }}>
-                        <SelectableIconButton onClick={() => setAlignType("left")} isActive={alignType === "left"} Icon={AlignLeftIcon} />
+                        <SelectableIconButton onClick={() => {
-                        <SelectableIconButton onClick={() => setAlignType("right")} isActive={alignType === "right"} Icon={AlignRightIcon} />
+                            setAlignType("left")
+                            let SPageClone = listQuizes[params].config
+                            SPageClone.startpage.position = "ltr"
+                            updateQuizesList(params, {config: SPageClone })
+                        }} isActive={alignType === "left"} Icon={AlignLeftIcon} />
+                        <SelectableIconButton onClick={() => {
+                            setAlignType("center")
+                            let SPageClone = listQuizes[params].config
+                            SPageClone.startpage.position = "cnt"
+                            updateQuizesList(params, {config: SPageClone })
+                        }} isActive={alignType === "center"} Icon={AlignCenterIcon} sx={{display: designType === "centered" ? "flex" : "none"}}/>
+                        <SelectableIconButton onClick={() => {
+                            setAlignType("right")
+                            let SPageClone = listQuizes[params].config
+                            SPageClone.startpage.position = "rtl"
+                            updateQuizesList(params, {config: SPageClone })
+                        }} isActive={alignType === "right"} Icon={AlignRightIcon} />
                     </Box>
 
                         <Box
@@ -397,28 +416,7 @@ export default function StartPageSettings() {
                         text={listQuizes[params].config.info.law}
                         onChange={mutationLawHC}
                     />
-                    <Link sx={{
+                    <Extra/>
-                        mt: "20px",
-                        fontSize: "16px",
-                        lineHeight: "19px",
-                        color: theme.palette.brightPurple.main,
-                        textDecorationColor: theme.palette.brightPurple.main
-                    }}>Дополнительно</Link>
-                    <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Mета заголовок</Typography>
-                    <CustomTextField placeholder="Текст-заполнитель — это текст, который " text={listQuizes[params].config.meta} onChange={mutationOrgMetaHC} />
-                    <Typography sx={{
-                        mt: "20px",
-                        fontSize: "16px",
-                        lineHeight: "19px",
-                        maxWidth: "80%",
-                        color: theme.palette.grey3.main,
-                    }}>
-                        Текст-заполнитель —
-                        это текст, который имеет Текст-заполнитель —
-                        это текст, который имеет Текст-заполнитель —
-                        это текст, который имеет Текст-заполнитель —
-                        это текст, который имеет Текст-заполнитель
-                    </Typography>
                 </Box>
             </Box>
             <Box
@@ -439,6 +437,7 @@ export default function StartPageSettings() {
                         SPageClone.startpage.background.mobile = "https://krot.info/uploads/posts/2022-03/1646156155_3-krot-info-p-smeshnie-tolstie-koti-smeshnie-foto-3.png"
                         SPageClone.startpage.background.video = "https://youtu.be/dbaPkCiLPKQ"
                         updateQuizesList(params, {config: SPageClone })
+                        navigate(`/questions/${params}`)
                     }}
                 >Настроить вопросы</Button>
             </Box>

src/pages/startPage/extra.tsx

@@ -0,0 +1,97 @@
+import {Box, Link, Typography, useMediaQuery, useTheme} from "@mui/material";
+import React, {useState} from "react";
+import CustomTextField from "@ui_kit/CustomTextField";
+import {quizStore} from "@root/quizes";
+import {useParams} from "react-router-dom";
+
+
+
+export default function Extra () {
+    const {listQuizes, updateQuizesList, removeQuiz, createBlank} = quizStore();
+    const params = Number(useParams().quizId);
+    const theme = useTheme();
+    const upMd = useMediaQuery(theme.breakpoints.up("md"));
+    const upSm = useMediaQuery(theme.breakpoints.up("sm"));
+    const [isExpanded, setIsExpanded] = useState(false);
+
+    const expandedHC = (bool:boolean) => {
+        setIsExpanded(bool)
+    }
+    const mutationOrgMetaHC = (e: any) => {
+        let SPageClone = listQuizes[params].config
+        SPageClone.meta = e.target.value
+        updateQuizesList(params, {config: SPageClone })
+    }
+    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 && (
+                    <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={listQuizes[params].config.meta} onChange={mutationOrgMetaHC} />
+                        <Typography sx={{
+                            mt: "20px",
+                            fontSize: "16px",
+                            lineHeight: "19px",
+                            maxWidth: "80%",
+                            color: theme.palette.grey3.main,
+                        }}>
+                            Текст-заполнитель —
+                            это текст, который имеет Текст-заполнитель —
+                            это текст, который имеет Текст-заполнитель —
+                            это текст, который имеет Текст-заполнитель —
+                            это текст, который имеет Текст-заполнитель
+                        </Typography>
+
+                    </Box>
+                )
+                }
+            </Box>
+        </Box>
+    )
+}