frontPanel/src/pages/createQuize/MyQuizzesFull.tsx

import {
    Box,
    Button,
    SxProps,
    Theme,
    Typography,
    useMediaQuery,
    useTheme,
} from "@mui/material";
import { createQuiz } 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 ComplexNavText from "./ComplexNavText";
import FirstQuiz from "./FirstQuiz";
import QuizCard from "./QuizCard";


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 (
        <>
            {quizes.length === 0 ? (
                <FirstQuiz />
            ) : (
                <SectionWrapper maxWidth="lg">
                    <ComplexNavText text1="Кабинет квизов" />
                    <Box
                        sx={{
                            display: "flex",
                            justifyContent: "space-between",
                            alignItems: "center",
                            mt: "20px",
                            mb: "30px",
                        }}
                    >
                        <Typography variant="h4">Мои квизы</Typography>
                        <Button
                            variant="contained"
                            sx={{
                                padding: isMobile ? "10px" : "10px 47px",
                                minWidth: "44px",
                            }}
                            onClick={() => createQuiz(navigate)}
                            data-cy="create-quiz"
                        >
                            {isMobile ? "+" : "Создать +"}
                        </Button>
                    </Box>
                    <Box
                        sx={{
                            py: "10px",
                            display: "flex",
                            flexWrap: "wrap",
                            gap: "40px",
                            mb: "60px",
                        }}
                    >
                        {quizes.map(quiz => (
                            <QuizCard
                                key={quiz.id}
                                quiz={quiz}
                                openCount={0}
                                applicationCount={0}
                                conversionPercent={0}
                            />
                        ))}
                    </Box>
                    {children}
                </SectionWrapper>
            )}
        </>
    );
}