frontPanel/src/pages/createQuize/MyQuizzesFull.tsx

import {Typography, useTheme, Box, Button, SxProps, Theme} from "@mui/material";
import ComplexNavText from "./ComplexNavText";
import QuizCard from "./QuizCard";
import SectionWrapper from "@ui_kit/SectionWrapper";
import React from "react";

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

export default function MyQuizzesFull({outerContainerSx: sx, children}: Props) {
    const theme = useTheme();

    return (
        <SectionWrapper
            maxWidth="lg"
            sx={{
                mt: "25px",
                mb: "70px",
            }}
        >
            <ComplexNavText text1="Кабинет квизов"/>
            <Box
                sx={{
                    display: "flex",
                    justifyContent: "space-between",
                    alignItems: "center",
                    mt: "20px",
                    mb: "30px",
                }}
            >
                <Typography variant="h4">Мои квизы</Typography>
                <Button
                    variant="contained"
                >Создать +</Button>
            </Box>
            <Box
                sx={{
                    py: "10px",
                    display: "flex",
                    flexWrap: "wrap",
                    gap: "40px",
                    mb: "60px",
                }}
            >
                <QuizCard name="Название" openCount={0} applicationCount={0} conversionPercent={0}/>
                <QuizCard name="Название" openCount={0} applicationCount={0} conversionPercent={0}/>
            </Box>
            {children}
        </SectionWrapper>
    )
}