frontPanel/src/pages/startPage/stepOne.tsx

import { Box, Button, useTheme } from "@mui/material";
import CreationCard from "@ui_kit/CreationCard";
import quizCreationImage1 from "../../assets/quiz-creation-1.png";
import quizCreationImage2 from "../../assets/quiz-creation-2.png";
import { useParams } from "react-router-dom";
import { quizStore } from "@root/quizes";

export default function StepOne() {
  const params = Number(useParams().quizId);
  const theme = useTheme();

  const { listQuizes, updateQuizesList } = quizStore();
  return (
    <Box
      sx={{
        overflowX: "scroll",
        padding: "0 5px 15px",
        "&::-webkit-scrollbar": { width: 0 },
      }}
    >
      <Box
        sx={{
          minWidth: "720px",
          display: "flex",
          gap: "20px",
          mt: "60px",
        }}
      >
        <Button
          variant="text"
          data-cy="create-quiz-card"
          onClick={() => {
            let SPageClone = listQuizes[params].config;
            SPageClone.type = "quize";
            updateQuizesList(params, { config: SPageClone });
          }}
        >
          <CreationCard
            header="Создание квиз-опроса"
            text="У стартовой страницы одна ключевая задача - заинтересовать посетителя пройти квиз. С ней сложно ошибиться, сформулируйте суть предложения и подберите живую фотографию, остальное мы сделаем за вас"
            image={quizCreationImage1}
            border={
              listQuizes[params].config.type === "quize"
                ? "1px solid #7E2AEA"
                : "none"
            }
          />
        </Button>
        <Button
          variant="text"
          onClick={() => {
            let SPageClone = listQuizes[params].config;
            SPageClone.type = "form";
            updateQuizesList(params, { config: SPageClone });
          }}
        >
          <CreationCard
            header="Создание анкеты"
            text="У стартовой страницы одна ключевая задача - заинтересовать посетителя пройти квиз. С ней сложно ошибиться, сформулируйте суть предложения и подберите живую фотографию, остальное мы сделаем за вас"
            image={quizCreationImage2}
            border={
              listQuizes[params].config.type === "form"
                ? "1px solid #7E2AEA"
                : "none"
            }
          />
        </Button>
      </Box>
    </Box>
  );
}