refactor

2023-04-23 11:39:34 +03:00 · 2023-04-23 11:39:34 +03:00 · 6c70b01cf8
commit 6c70b01cf8
parent 8b8f23a0d1
14 changed files with 188 additions and 212 deletions
--- a/src/App.tsx
+++ b/src/App.tsx
@ -1,4 +1,4 @@
-import { CssBaseline, ThemeProvider } from "@mui/material";
+import { CssBaseline } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import CreateQuiz from "./components/CreateQuiz/CreateQuiz";
 import FirstQuiz from "./pages/startPage/FirstQuiz";
@ -6,33 +6,32 @@ import MyQuizzes from "./components/MyQuizzes";
 import Navbar from "./components/Navbar/Navbar";
 import NavbarCreateQuiz from "./components/Navbar/NavbarCreateQuiz";
 import QuizGallery from "./components/QuizGallery";
-// import lightTheme from "./utils/themes/light";
-// import darkTheme from "./utils/themes/dark";
+import lightTheme from "./utils/themes/light";
+import darkTheme from "./utils/themes/dark";

 const Divider = styled("div")(() => ({
-    height: "30px",
-    backgroundColor: "black",
+  height: "30px",
+  backgroundColor: "black",
 }));

 function App() {
+  return (
+    <>
+      <CssBaseline />
+      <Navbar isLoggedIn={true} />
+      <FirstQuiz />
+      <Divider />

-    return (
-        <>
-            <CssBaseline />
-            <Navbar isLoggedIn={true} />
-            <FirstQuiz />
-            <Divider />
+      <MyQuizzes />
+      <Divider />

-            <MyQuizzes />
-            <Divider />
+      <QuizGallery />
+      <Divider />

-            <QuizGallery />
-            <Divider />
-
-            <NavbarCreateQuiz />
-            <CreateQuiz />
-        </>
-    );
+      <NavbarCreateQuiz />
+      <CreateQuiz />
+    </>
+  );
 }

 export default App;
--- a/src/components/CustomWrapper.tsx
+++ b/src/components/CustomWrapper.tsx
@ -1,7 +1,6 @@
 import { useState } from "react";
-import { Box, IconButton, SvgIcon, SxProps, Theme, Typography, useMediaQuery, useTheme } from "@mui/material";
+import { Box, IconButton, SxProps, Theme, Typography, useMediaQuery, useTheme } from "@mui/material";

-import ClearIcon from "@mui/icons-material/Clear";
 import CrossedEyeIcon from "@icons/CrossedEyeIcon";
 import CopyIcon from "@icons/CopyIcon";
 import TrashIcon from "@icons/TrashIcon";
@ -188,26 +187,6 @@ export default function CustomWrapper({ text, sx, result }: Props) {
              >
                10 руб.
              </Typography>
-              {upSm ? (
-                <Typography
-                  component="div"
-                  sx={{
-                    color: theme.palette.text.secondary,
-                    borderBottom: `1px solid ${theme.palette.text.secondary}`,
-                    width: "max-content",
-                    lineHeight: "19px",
-                    cursor: "pointer",
-                    "&:active": {
-                      color: "#FB5607",
-                      borderBottomColor: "#FB5607",
-                    },
-                  }}
-                >
-                  Удалить
-                </Typography>
-              ) : (
-                <SvgIcon component={ClearIcon}></SvgIcon>
-              )}
            </Box>
          </Box>
        )}
--- a/src/components/DescriptionForm/ButtinsOptionsForm.tsx
+++ b/src/components/DescriptionForm/ButtinsOptionsForm.tsx
@ -1,12 +1,14 @@
-import MiniButtonSetting from "@ui_kit/MiniButtonSetting";
 import React from "react";
-import SettingIcon from "@icons/questionsPage/settingIcon";
-import Clue from "@icons/questionsPage/clue";
-import Branching from "@icons/questionsPage/branching";
 import { Box, IconButton, useTheme } from "@mui/material";
+
+import MiniButtonSetting from "@ui_kit/MiniButtonSetting";
+
+import SettingIcon from "@icons/questionsPage/settingIcon";
+import Branching from "@icons/questionsPage/branching";
 import HideIcon from "@icons/questionsPage/hideIcon";
 import CopyIcon from "@icons/questionsPage/CopyIcon";
 import DeleteIcon from "@icons/questionsPage/deleteIcon";
+
 import StarIconPoints from "./StarIconsPoints";

 interface Props {
@ -16,6 +18,7 @@ interface Props {

 export default function ButtonsOptionsForm({ SSHC, switchState }: Props) {
  const theme = useTheme();
+
  const buttonSetting: { icon: JSX.Element; title: string; value: string }[] = [
    {
      icon: <SettingIcon color={switchState === "setting" ? "#ffffff" : theme.palette.grey3.main} />,
@ -50,19 +53,19 @@ export default function ButtonsOptionsForm({ SSHC, switchState }: Props) {
          gap: "10px",
        }}
      >
-        {buttonSetting.map((e, i) => (
+        {buttonSetting.map(({ icon, title, value }, index) => (
          <MiniButtonSetting
-            key={i}
+            key={index}
            onClick={() => {
-              SSHC(e.value);
+              SSHC(value);
            }}
            sx={{
-              backgroundColor: switchState === e.value ? theme.palette.brightPurple.main : "transparent",
-              color: switchState === e.value ? "#ffffff" : theme.palette.grey3.main,
+              backgroundColor: switchState === value ? theme.palette.brightPurple.main : "transparent",
+              color: switchState === value ? "#ffffff" : theme.palette.grey3.main,
            }}
          >
-            {e.icon}
-            {e.title}
+            {icon}
+            {title}
          </MiniButtonSetting>
        ))}
      </Box>
--- a/src/components/DescriptionForm/DescriptionForm.tsx
+++ b/src/components/DescriptionForm/DescriptionForm.tsx
@ -1,30 +1,31 @@
+import React from "react";
 import { useState } from "react";
 import { Box, IconButton, TextField, Typography } from "@mui/material";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-import DeleteIcon from "@icons/questionsPage/deleteIcon";
+
 import CustomButton from "../CustomButton";

+import SwitchAnswerOptions from "./SwitchAnswerOptions";
+import ButtonsOptionsForm from "./ButtinsOptionsForm";
 import PriceButtons from "./PriceButton";
 import DiscountButtons from "./DiscountButtons";
-import ButtonsOptions from "../../pages/Questions/ButtonsOptions";

 import CustomTextField from "@ui_kit/CustomTextField";

 import OneIcon from "@icons/questionsPage/OneIcon";
+import DeleteIcon from "@icons/questionsPage/deleteIcon";
 import PointsIcon from "@icons/questionsPage/PointsIcon";
-import ImageAndVideoButtons from "./ImageAndVideoButtons";
 import Info from "@icons/Info";
-import SwitchAnswerOptions from "./SwitchAnswerOptions";
-import ButtonsOptionsForm from "./ButtinsOptionsForm";

-export default function DescriptionForm() {
-  const [switchState, setSwitchState] = useState("setting");
-  const [callToAction, setCallToAction] = useState<boolean>(false);
+import ImageAndVideoButtons from "./ImageAndVideoButtons";
+
+export const DescriptionForm = () => {
+  const [switchState, setSwitchState] = useState<string>("");
  const [priceButtonsActive, setPriceButtonsActive] = useState<number>(0);
  const [priceButtonsType, setPriceButtonsType] = useState<string>();
  const [forwarding, setForwarding] = useState<boolean>(false);

-  const ButtonsActive = (index: number, type: string) => {
+  const buttonsActive = (index: number, type: string) => {
    setPriceButtonsActive(index);
    setPriceButtonsType(type);
  };
@ -53,13 +54,11 @@ export default function DescriptionForm() {
        </Box>

        <Box sx={{ display: "flex" }}>
-          <PriceButtons ButtonsActive={ButtonsActive} priceButtonsActive={priceButtonsActive} />
+          <PriceButtons ButtonsActive={buttonsActive} priceButtonsActive={priceButtonsActive} />
          <DiscountButtons />
        </Box>

        <TextField
-          // value={text}
-
          fullWidth
          placeholder="Описание"
          sx={{
@ -92,7 +91,6 @@ export default function DescriptionForm() {
            </Box>
            <Box sx={{ display: "flex" }}>
              <TextField
-                // value={text}
                placeholder="Узнать подробнее"
                fullWidth
                sx={{
@ -142,7 +140,6 @@ export default function DescriptionForm() {
                  </Box>
                  <Box>
                    <TextField
-                      // value={text}
                      placeholder="https://exemple.ru"
                      fullWidth
                      sx={{
@ -165,13 +162,12 @@ export default function DescriptionForm() {
                  </Box>
                </Box>
              ) : (
-                ""
+                <React.Fragment />
              )}
            </Box>
          </Box>
        ) : (
          <CustomButton
-            onClick={() => setCallToAction(true)}
            variant="contained"
            sx={{
              mb: "20px",
@ -190,4 +186,4 @@ export default function DescriptionForm() {
      <SwitchAnswerOptions switchState={switchState} />
    </Box>
  );
-}
+};
--- a/src/components/ResultListForm.tsx
+++ b/src/components/ResultListForm.tsx
@ -9,7 +9,7 @@ import ProportionsIcon21 from "@icons/questionsPage/ProportionsIcon21";
 import ProportionsIcon11 from "@icons/questionsPage/ProportionsIcon11";
 import ProportionsIcon12 from "@icons/questionsPage/ProportionsIcon12";

-export default function ResultListPage() {
+export const ResultListForm = () => {
  const [alignType, setAlignType] = useState<"left" | "right">("left");
  const [proportions, setProportions] = useState<"oneOne" | "twoOne" | "oneTwo">("oneOne");
  return (
@ -193,4 +193,4 @@ export default function ResultListPage() {
      </Box>
    </Box>
  );
-}
+};
--- a/src/components/SettingForm.tsx
+++ b/src/components/SettingForm.tsx
@ -1,17 +1,18 @@
+import { useState } from "react";
 import { Box, Button, IconButton, SxProps, Theme, Typography } from "@mui/material";

-import Info from "@icons/Info";
 import CustomButton from "./CustomButton";
-import SwichResult from "./SwichResult";
+import { SwitchSetting } from "./SwichResult";
+
+import Info from "@icons/Info";

 import listChecks from "../assets/icon/listChecks.svg";
 import ShareNetwork from "../assets/icon/ShareNetwork.svg";
 import ArrowCounterClockWise from "../assets/icon/ArrowCounterClockWise.svg";
-import { useState } from "react";

 const buttonSetting: { title: string; sx: SxProps<Theme>; type: string }[] = [
  {
-    sx: { backgroundColor: "#7E2AEA", color: "white", width: "237px", height: "44px" },
+    sx: { backgroundColor: "#7E2AEA", color: "white", width: "237px", height: "44px", border: "1px solid #9A9AAF" },
    title: "До формы контактов",
    type: "toContactForm",
  },
@ -27,7 +28,7 @@ const buttonSetting: { title: string; sx: SxProps<Theme>; type: string }[] = [
  },
 ];

-export default function SettingForm() {
+export const SettingForm = () => {
  const [activeIndex, setActiveIndex] = useState<number>();
  const [typeActive, setTypeActive] = useState<string>();

@ -37,7 +38,7 @@ export default function SettingForm() {
  };

  return (
-    <Box sx={{ width: "796px" }}>
+    <Box component="section" sx={{ width: "796px" }}>
      <Box sx={{ display: "flex", alignItems: "center", mb: "40px" }}>
        <Typography sx={{ pr: "10px" }} variant="h5">
          Настройки результатов
@ -60,7 +61,9 @@ export default function SettingForm() {
            mb: "20px",
          }}
        >
-          <Typography sx={{ color: "#9A9AAF" }}>Показывать результат</Typography>
+          <Typography component="p" sx={{ color: "#9A9AAF" }}>
+            Показывать результат
+          </Typography>
          <IconButton>
            <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
              <rect width="30" height="30" rx="6" fill="#EEE4FC" />
@ -91,12 +94,12 @@ export default function SettingForm() {
          ))}
        </Box>
        {typeActive === "e-mail" ? (
-          <SwichResult icon={listChecks} text="Показывать несколько результатов" />
+          <SwitchSetting icon={listChecks} text="Показывать несколько результатов" />
        ) : (
          <>
-            <SwichResult icon={listChecks} text="Показывать несколько результатов" />
-            <SwichResult icon={ShareNetwork} text="Поделиться результатами" />
-            <SwichResult icon={ArrowCounterClockWise} text="Кнопка `Пройти тест заново`" />
+            <SwitchSetting icon={listChecks} text="Показывать несколько результатов" />
+            <SwitchSetting icon={ShareNetwork} text="Поделиться результатами" />
+            <SwitchSetting icon={ArrowCounterClockWise} text="Кнопка `Пройти тест заново`" />
          </>
        )}
      </Box>
@ -125,4 +128,4 @@ export default function SettingForm() {
      </Box>
    </Box>
  );
-}
+};
--- a/src/components/SwichResult.tsx
+++ b/src/components/SwichResult.tsx
@ -5,7 +5,7 @@ type Props = {
  text: string;
  icon: any;
 };
-export default function SwichResult({ text, icon }: Props) {
+export const SwitchSetting = ({ text, icon }: Props) => {
  const [active, setActive] = useState<boolean>(false);
  return (
    <Box
@ -41,4 +41,4 @@ export default function SwichResult({ text, icon }: Props) {
      </IconButton>
    </Box>
  );
-}
+};
--- a/src/index.tsx
+++ b/src/index.tsx
@ -1,24 +1,19 @@
 import React from "react";
-import ReactDOM from "react-dom/client";
-import "./index.css";
-import App from "./App";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
-import lightTheme from "./utils/themes/light";
+import ReactDOM from "react-dom/client";
 import { ThemeProvider } from "@mui/material";
-import CreateQuiz from "./components/CreateQuiz/CreateQuiz";
-import NavbarCreateQuiz from "./components/Navbar/NavbarCreateQuiz";
-import darkTheme from "./utils/themes/dark";

-import HorizontalLinearStepper from "./ui_kit/Stepper";
-import Create from "./pages/createQuize/Create";
-import Quizes from "./pages/createQuize/Quizes";
-import Projects from "./pages/createQuize/Projects";
-import Gallery from "./pages/createQuize/Gallery";
+import { Setting } from "./pages/Setting";
+
 import StartPage from "./pages/startPage/StartPage";
 import Main from "./pages/main";
 import FirstQuiz from "./pages/startPage/FirstQuiz";
 import QuestionsPage from "./pages/Questions/QuestionsPage";
-import Result from "./pages/Result";
+import { Result } from "./pages/Result/Result";
+
+import lightTheme from "./utils/themes/light";
+
+import "./index.css";

 const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
 root.render(
@ -31,6 +26,7 @@ root.render(
            <Route path="/create" element={<StartPage />} />
            <Route path="/questions" element={<QuestionsPage />} />
            <Route path="/result" element={<Result />} />
+            <Route path="/settings" element={<Setting />} />
          </Route>
        </Routes>
      </BrowserRouter>
--- a/src/pages/Questions/ButtonsOptions.tsx
+++ b/src/pages/Questions/ButtonsOptions.tsx
@ -49,19 +49,19 @@ export default function ButtonsOptions({ SSHC, switchState }: Props) {
          gap: "10px",
        }}
      >
-        {buttonSetting.map((e, i) => (
+        {buttonSetting.map(({ icon, title, value }) => (
          <MiniButtonSetting
-            key={i}
+            key={title}
            onClick={() => {
-              SSHC(e.value);
+              SSHC(value);
            }}
            sx={{
-              backgroundColor: switchState === e.value ? theme.palette.brightPurple.main : "transparent",
-              color: switchState === e.value ? "#ffffff" : theme.palette.grey3.main,
+              backgroundColor: switchState === value ? theme.palette.brightPurple.main : "transparent",
+              color: switchState === value ? "#ffffff" : theme.palette.grey3.main,
            }}
          >
-            {e.icon}
-            {e.title}
+            {icon}
+            {title}
          </MiniButtonSetting>
        ))}
      </Box>
--- a/src/pages/Questions/OptionsPicture/settingOpytionsPict.tsx
+++ b/src/pages/Questions/OptionsPicture/settingOpytionsPict.tsx
@ -35,6 +35,7 @@ export function SelectIconButton({ Icon, isActive = false, onClick }: Props) {
          ml: 0,
        },
        "&:hover": {
+          border: "none",
          borderColor: isActive ? theme.palette.brightPurple.main : theme.palette.grey2.main,
        },
      }}
--- a/src/pages/Questions/RatingOptions/settingRating.tsx
+++ b/src/pages/Questions/RatingOptions/settingRating.tsx
@ -1,8 +1,9 @@
-import {Box, ButtonBase, Slider, Typography, useTheme} from "@mui/material";
-import CustomCheckbox from "@ui_kit/CustomCheckbox";
-import InfoIcon from "@icons/InfoIcon";
 import React from "react";
-import RatingStar from "@icons/questionsPage/ratingStar";
+import { Box, ButtonBase, Slider, Typography, useTheme } from "@mui/material";
+
+import CustomCheckbox from "@ui_kit/CustomCheckbox";
+
+import InfoIcon from "@icons/InfoIcon";
 import TropfyIcon from "@icons/questionsPage/tropfyIcon";
 import FlagIcon from "@icons/questionsPage/FlagIcon";
 import HeartIcon from "@icons/questionsPage/heartIcon";
@ -11,51 +12,58 @@ import LightbulbIcon from "@icons/questionsPage/lightbulbIcon";
 import HashtagIcon from "@icons/questionsPage/hashtagIcon";
 import StarIconMini from "@icons/questionsPage/StarIconMini";

-
-
 export default function SettingSlider() {
-    const theme = useTheme();
-    const [current, setCurrent] = React.useState(1)
-    const buttonRatingForm: {icon: JSX.Element} [] =[
-        {icon: <StarIconMini color={theme.palette.grey3.main}/>},
-        {icon: <TropfyIcon color={theme.palette.grey3.main}/>},
-        {icon: <FlagIcon color={theme.palette.grey3.main}/>},
-        {icon: <HeartIcon color={theme.palette.grey3.main}/>},
-        {icon: <LikeIcon color={theme.palette.grey3.main}/>},
-        {icon: <LightbulbIcon color={theme.palette.grey3.main}/>},
-        {icon: <HashtagIcon color={theme.palette.grey3.main}/>},
-    ]
+  const theme = useTheme();
+  const [current, setCurrent] = React.useState(1);
+  const buttonRatingForm: { icon: JSX.Element }[] = [
+    { icon: <StarIconMini color={theme.palette.grey3.main} /> },
+    { icon: <TropfyIcon color={theme.palette.grey3.main} /> },
+    { icon: <FlagIcon color={theme.palette.grey3.main} /> },
+    { icon: <HeartIcon color={theme.palette.grey3.main} /> },
+    { icon: <LikeIcon color={theme.palette.grey3.main} /> },
+    { icon: <LightbulbIcon color={theme.palette.grey3.main} /> },
+    { icon: <HashtagIcon color={theme.palette.grey3.main} /> },
+  ];

-    return (
-        <Box sx={{display: 'flex'}}>
-            <Box sx={{padding: '20px'}}>
-                <Typography sx={{marginBottom: '15px'}}>Настройки рейтинга</Typography>
-                <Typography sx={{color: theme.palette.grey2.main, fontSize: '16px', fontWeight: 400}}>Форма</Typography>
-                <Box sx={{display: 'flex', marginBottom: '15px' }}>
-                    {buttonRatingForm.map( (e,i) => (
-                        <ButtonBase
-                            key={i}
-                            onClick={()=>{setCurrent(i)}}
-                            sx={{backgroundColor: current === i ? theme.palette.brightPurple.main : 'transparent',
-                                color: current === i ? '#ffffff' : theme.palette.grey3.main,
-                                width: '40px',
-                                height: '40px',
-                                borderRadius: '4px'
-                            }}
-                        >
-                            {e.icon}
-                        </ButtonBase>
-                    ))}
-                </Box>
-                <Typography sx={{color: theme.palette.grey2.main, fontSize: '16px', fontWeight: 400}}>Количество</Typography>
-                <Slider defaultValue={5} min={1} max={10} aria-label="Default" valueLabelDisplay="auto" sx={{color: theme.palette.brightPurple.main}} />
-
-            </Box>
-            <Box sx={{padding: '20px'}}>
-                <Typography>Настройки вопросов</Typography>
-                <CustomCheckbox label={'Необязательный вопрос'}/>
-                <CustomCheckbox label={'Внутреннее название вопроса'}/> <InfoIcon />
-            </Box>
+  return (
+    <Box sx={{ display: "flex" }}>
+      <Box sx={{ padding: "20px" }}>
+        <Typography sx={{ marginBottom: "15px" }}>Настройки рейтинга</Typography>
+        <Typography sx={{ color: theme.palette.grey2.main, fontSize: "16px", fontWeight: 400 }}>Форма</Typography>
+        <Box sx={{ display: "flex", marginBottom: "15px" }}>
+          {buttonRatingForm.map((element, index) => (
+            <ButtonBase
+              key={index}
+              onClick={() => {
+                setCurrent(index);
+              }}
+              sx={{
+                backgroundColor: current === index ? theme.palette.brightPurple.main : "transparent",
+                color: current === index ? "#ffffff" : theme.palette.grey3.main,
+                width: "40px",
+                height: "40px",
+                borderRadius: "4px",
+              }}
+            >
+              {element.icon}
+            </ButtonBase>
+          ))}
        </Box>
-    );
-};
+        <Typography sx={{ color: theme.palette.grey2.main, fontSize: "16px", fontWeight: 400 }}>Количество</Typography>
+        <Slider
+          defaultValue={5}
+          min={1}
+          max={10}
+          aria-label="Default"
+          valueLabelDisplay="auto"
+          sx={{ color: theme.palette.brightPurple.main }}
+        />
+      </Box>
+      <Box sx={{ padding: "20px" }}>
+        <Typography>Настройки вопросов</Typography>
+        <CustomCheckbox label={"Необязательный вопрос"} />
+        <CustomCheckbox label={"Внутреннее название вопроса"} /> <InfoIcon />
+      </Box>
+    </Box>
+  );
+}
--- a/src/pages/Result.tsx
+++ b/src/pages/Result.tsx
@ -1,43 +0,0 @@
-import CreationFullCard from "../components/CreationFullCard";
-import image from "../assets/Rectangle 110.png";
-import { Box, useTheme } from "@mui/material";
-import CustomButton from "../components/CustomButton";
-import { useState } from "react";
-import ResultSetting from "../components/ResultSetting";
-
-import Info from "@icons/Info";
-
-export default function Result() {
-  const theme = useTheme();
-
-  const [settings, setSettings] = useState<boolean>(false);
-  return (
-    <Box>
-      {settings ? (
-        <ResultSetting setSettings={setSettings} />
-      ) : (
-        <>
-          <CreationFullCard
-            text="Вы можете показывать разные результаты квиза (добавьте описание, изображение, стоимость и т.п.) разным пользователям, нужно только их создать и проставить условия. Таким образом ваш квиз получится максимально индивидуальным для каждого клиента. Показывайте картинку/видео вместо результата или переадресовывайте пользователя по нужной ссылке."
-            text2="Этот шаг - необязательный, квиз будет работать и без автоматических результатов."
-            image={image}
-          />
-          <Box sx={{ mt: "30px", alignItems: "center" }}>
-            <CustomButton
-              onClick={() => setSettings(true)}
-              variant="contained"
-              sx={{
-                backgroundColor: theme.palette.brightPurple.main,
-                mr: "23px",
-                minWidth: "258px",
-              }}
-            >
-              Создать результаты
-            </CustomButton>
-            <Info />
-          </Box>
-        </>
-      )}
-    </Box>
-  );
-}
--- a/src/pages/Result/Result.tsx
+++ b/src/pages/Result/Result.tsx
@ -0,0 +1,38 @@
+import { Link } from "react-router-dom";
+import { Box, useTheme } from "@mui/material";
+
+import CustomButton from "../../components/CustomButton";
+import CreationFullCard from "../../components/CreationFullCard";
+
+import Info from "@icons/Info";
+
+import image from "../../assets/Rectangle 110.png";
+
+export const Result = () => {
+  const theme = useTheme();
+  return (
+    <Box component="section">
+      <CreationFullCard
+        text="Вы можете показывать разные результаты квиза (добавьте описание, изображение, стоимость и т.п.) разным пользователям, нужно только их создать и проставить условия. Таким образом ваш квиз получится максимально индивидуальным для каждого клиента. Показывайте картинку/видео вместо результата или переадресовывайте пользователя по нужной ссылке."
+        text2="Этот шаг - необязательный, квиз будет работать и без автоматических результатов."
+        image={image}
+      />
+      <Box sx={{ mt: "30px", alignItems: "center" }}>
+        <Link to="/settings">
+          <CustomButton
+            variant="contained"
+            sx={{
+              backgroundColor: theme.palette.brightPurple.main,
+              mr: "23px",
+              minWidth: "258px",
+            }}
+          >
+            Создать результаты
+          </CustomButton>
+        </Link>
+
+        <Info />
+      </Box>
+    </Box>
+  );
+};
--- a/src/components/ResultSetting.tsx
+++ b/src/components/ResultSetting.tsx
@ -1,20 +1,18 @@
 import { Box, Button, Typography, useTheme } from "@mui/material";

-import CustomWrapper from "./CustomWrapper";
-import CustomButton from "./CustomButton";
-import BackButton from "./Button/BackButton";
+import { SettingForm } from "../components/SettingForm";
+import { DescriptionForm } from "../components/DescriptionForm/DescriptionForm";
+import { ResultListForm } from "../components/ResultListForm";
+
+import CustomWrapper from "../components/CustomWrapper";
+import CustomButton from "../components/CustomButton";
+import BackButton from "../components/Button/BackButton";

 import Plus from "@icons/Plus";
 import Info from "@icons/Info";
 import IconPlus from "@icons/IconPlus";
-import SettingForm from "./SettingForm";
-import DescriptionForm from "./DescriptionForm/DescriptionForm";
-import ResultListPage from "./ResultListPage";
-type Props = {
-  setSettings: React.Dispatch<React.SetStateAction<boolean>>;
-};

-export default function ResultSetting({ setSettings }: Props) {
+export const Setting = () => {
  const theme = useTheme();
  return (
    <Box sx={{ width: "796px" }}>
@ -24,7 +22,6 @@ export default function ResultSetting({ setSettings }: Props) {
        </Typography>
        <Info />
        <Button
-          onClick={() => setSettings(false)}
          disableRipple
          sx={{
            ml: "auto",
@ -83,7 +80,6 @@ export default function ResultSetting({ setSettings }: Props) {
        <Typography component="div" sx={{ ml: "auto" }}>
          <BackButton />
          <CustomButton
-            onClick={() => setSettings(true)}
            variant="contained"
            sx={{
              backgroundColor: theme.palette.brightPurple.main,
@ -98,8 +94,8 @@ export default function ResultSetting({ setSettings }: Props) {
      </Box>

      <SettingForm />
-      <ResultListPage />
+      <ResultListForm />
      <DescriptionForm />
    </Box>
  );
-}
+};