frontPanel/src/pages/createQuize/MyQuizzesFull.tsx

import {
  Box,
  Button,
  SxProps,
  Theme,
  Typography,
  useMediaQuery,
  useTheme,
} from "@mui/material";
import { createQuiz, updateQuiz } from "@root/quizes/actions";
import { useQuizes } from "@root/quizes/hooks";
import SectionWrapper from "@ui_kit/SectionWrapper";
import React from "react";
import { useNavigate } from "react-router-dom";
import { resetEditConfig } from "@root/quizes/actions";
import FirstQuiz from "./FirstQuiz";
import QuizCard from "./QuizCard";
import HeaderFull from "@ui_kit/Header/HeaderFull";
import QuizgenegationName from "@utils/quizgenegationName";

interface Props {
  outerContainerSx?: SxProps<Theme>;
  children?: React.ReactNode;
}

export default function MyQuizzesFull({
  outerContainerSx: sx,
  children,
}: Props) {
  const { quizes } = useQuizes();
  const navigate = useNavigate();
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down(500));

  return (
    <>
      <HeaderFull />
      {quizes.length === 0 ? (
        <FirstQuiz />
      ) : (
        <SectionWrapper
          maxWidth="lg"
          sx={{ padding: isMobile ? "0 16px" : "20px" }}
        >
          <Box
            sx={{
              display: "flex",
              justifyContent: "space-between",
              alignItems: "center",
              mt: "20px",
              mb: "30px",
            }}
          >
            <Typography variant="h4">Мои quiz</Typography>
            <Button
              variant="contained"
              sx={{
                padding: isMobile ? "10px" : "10px 47px",
                minWidth: "44px",
              }}
              onClick={() => {
                resetEditConfig();
                createQuiz(navigate);
              }}
              data-cy="create-quiz"
            >
              {isMobile ? "+" : "Создать +"}
            </Button>
          </Box>
          <Box
            sx={{
              py: "10px",
              display: "flex",
              flexWrap: "wrap",
              gap: "40px",
              mb: "60px",
            }}
          >
            {quizes.map((quiz) => {
              if (quiz.name.length === 0 || quiz.name === " ") {
                updateQuiz(quiz.id, (quiz) => {
                  quiz.name = QuizgenegationName({ quiz });
                });
              }

              return (
                <QuizCard
                  key={quiz.id}
                  quiz={quiz}
                  openCount={quiz.session_count}
                  applicationCount={quiz.passed_count}
                  conversionPercent={
                    quiz.session_count
                      ? (
                          (quiz.passed_count / quiz.session_count) *
                          100
                        ).toFixed(1)
                      : 0
                  }
                />
              );
            })}
          </Box>
          {children}
        </SectionWrapper>
      )}
    </>
  );
}