frontPanel/src/pages/createQuize/MyQuizzesFull.tsx

import {Typography, 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";
import {quizStore} from "@root/quizes";
import FirstQuiz from "./FirstQuiz";
interface Props {
    outerContainerSx?: SxProps<Theme>;
    children?: React.ReactNode;
}

function getRandom(min: number, max:number) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min)) + min;
}



export default function MyQuizzesFull({outerContainerSx: sx, children}: Props) {
    const {listQuizes, updateQuizesList, removeQuiz} = quizStore()
    return (
        <>
        {Object.keys(listQuizes).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: "10px 47px"}}
                                onClick={() => {
                                    updateQuizesList({
                                        "id": getRandom(10000, 100000),
                                        "qid": "string",
                                        "deleted": false,
                                        "archived": true,
                                        "fingerprinting": true,
                                        "repeatable": true,
                                        "note_prevented": true,
                                        "mail_notifications": true,
                                        "unique_answers": true,
                                        "name": "string",
                                        "description": "string",
                                        "config": "string",
                                        "status": "string",
                                        "limit": 0,
                                        "due_to": 0,
                                        "time_of_passing": 0,
                                        "pausable": true,
                                        "version": 0,
                                        "version_comment": "string",
                                        "created_at": "string",
                                        "updated_at": "string",
                                        "question_cnt": 0,
                                        "passed_count": 0,
                                        "average_time": 0,
                                        "super": true,
                                        "group_id": 0
                                    })
                                }}
                            >Создать +</Button>
                        </Box>
                        <Box
                            sx={{
                                py: "10px",
                                display: "flex",
                                flexWrap: "wrap",
                                gap: "40px",
                                mb: "60px",
                            }}
                        >
                            {Object.values(listQuizes).map((e, i) =>(
                                    <QuizCard name={e.name}
                                              openCount={0}
                                              applicationCount={0}
                                              conversionPercent={0}
                                              onClickDelete={() => {
                                                  removeQuiz(e.id)
                                              }}/>
                                )
                            )}

                        </Box>
                        {children}
                    </SectionWrapper>

      }
      </>
    )
}