update Behavior of the logo and back arrow buttons
This commit is contained in:
ArtChaos189
parent
e6252449f0
commit
c51cdbea67
@ -18,7 +18,7 @@ export default function Component() {
|
||||
const [select, setSelect] = React.useState(0);
|
||||
const userId = useUserStore((state) => state.userId);
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation()
|
||||
const location = useLocation();
|
||||
|
||||
const onClick = () => (userId ? navigate("/list") : navigate("/signin"));
|
||||
|
||||
@ -41,7 +41,9 @@ export default function Component() {
|
||||
padding: 0,
|
||||
}}
|
||||
>
|
||||
<QuizLogo width={isMobile ? 100 : 150} />
|
||||
<Link to="/">
|
||||
<QuizLogo width={isMobile ? 100 : 150} />
|
||||
</Link>
|
||||
{/*<Box*/}
|
||||
{/* sx={{*/}
|
||||
{/* maxWidth: '595px',*/}
|
||||
@ -67,7 +69,7 @@ export default function Component() {
|
||||
{/* ))}*/}
|
||||
{/*</Box>*/}
|
||||
<Button
|
||||
variant="outlined"
|
||||
variant="outlined"
|
||||
onClick={onClick}
|
||||
sx={{
|
||||
color: "black",
|
||||
|
||||
@ -4,17 +4,17 @@ import {} from "react-router-dom";
|
||||
import { useLocation, Link } from "react-router-dom";
|
||||
|
||||
import {
|
||||
useMediaQuery,
|
||||
useTheme,
|
||||
Button,
|
||||
Dialog,
|
||||
ListItem,
|
||||
AppBar,
|
||||
List,
|
||||
Toolbar,
|
||||
IconButton,
|
||||
Box,
|
||||
Slide,
|
||||
useMediaQuery,
|
||||
useTheme,
|
||||
Button,
|
||||
Dialog,
|
||||
ListItem,
|
||||
AppBar,
|
||||
List,
|
||||
Toolbar,
|
||||
IconButton,
|
||||
Box,
|
||||
Slide,
|
||||
} from "@mui/material";
|
||||
import { TransitionProps } from "@mui/material/transitions";
|
||||
|
||||
@ -38,212 +38,202 @@ import Logotip from "./images/icons/QuizLogo";
|
||||
// ];
|
||||
|
||||
interface Props {
|
||||
theme?: "dark" | "light";
|
||||
bgColor?: string;
|
||||
theme?: "dark" | "light";
|
||||
bgColor?: string;
|
||||
}
|
||||
|
||||
const Transition = React.forwardRef(function Transition(
|
||||
props: TransitionProps & {
|
||||
children: React.ReactElement;
|
||||
},
|
||||
props: TransitionProps & {
|
||||
children: React.ReactElement;
|
||||
},
|
||||
|
||||
ref: React.Ref<unknown>
|
||||
ref: React.Ref<unknown>
|
||||
) {
|
||||
return <Slide direction={"left"} ref={ref} {...props} />;
|
||||
return <Slide direction={"left"} ref={ref} {...props} />;
|
||||
});
|
||||
|
||||
const height = "80px";
|
||||
export default function FullScreenDialog({
|
||||
theme = "dark",
|
||||
bgColor = "#F2F3F7",
|
||||
}: Props) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const location = useLocation();
|
||||
const themeMUI = useTheme();
|
||||
const isMobile = useMediaQuery(themeMUI.breakpoints.down("md"));
|
||||
export default function FullScreenDialog({ theme = "dark", bgColor = "#F2F3F7" }: Props) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const location = useLocation();
|
||||
const themeMUI = useTheme();
|
||||
const isMobile = useMediaQuery(themeMUI.breakpoints.down("md"));
|
||||
|
||||
const handleClickOpen = () => {
|
||||
setOpen(true);
|
||||
};
|
||||
const handleClickOpen = () => {
|
||||
setOpen(true);
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
setOpen(false);
|
||||
};
|
||||
const handleClose = () => {
|
||||
setOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<SectionStyled
|
||||
tag="header"
|
||||
bg={bgColor}
|
||||
mwidth={"1200px"}
|
||||
sxsect={{
|
||||
minHeight: isMobile? "50px" : {height},
|
||||
position: "fixed",
|
||||
zIndex: 11
|
||||
return (
|
||||
<>
|
||||
<SectionStyled
|
||||
tag="header"
|
||||
bg={bgColor}
|
||||
mwidth={"1200px"}
|
||||
sxsect={{
|
||||
minHeight: isMobile ? "50px" : { height },
|
||||
position: "fixed",
|
||||
zIndex: 11,
|
||||
}}
|
||||
sxcont={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
svg: { color: "#000000" },
|
||||
padding: isMobile ? 0 : "0 22px 0 40px",
|
||||
}}
|
||||
>
|
||||
<Box sx={{ bgcolor: "none", paddingTop: isMobile ? "6px" : 0 }}>
|
||||
<Link to="/">
|
||||
<Logotip width={150} />
|
||||
</Link>
|
||||
</Box>
|
||||
{!isMobile && (
|
||||
<Button
|
||||
// onClick={() => setIsContactFormOpen(true)}
|
||||
disableRipple
|
||||
sx={{
|
||||
color: "black",
|
||||
border: "1px solid black",
|
||||
ml: "auto",
|
||||
mr: "38px",
|
||||
textTransform: "none",
|
||||
fontWeight: "400",
|
||||
fontSize: "18px",
|
||||
lineHeight: "24px",
|
||||
borderRadius: "8px",
|
||||
padding: "8px 17px",
|
||||
"&:hover": {
|
||||
background: "rgba(126, 42, 234, 0.07)",
|
||||
bgcolor: "#7E2AEA",
|
||||
},
|
||||
}}
|
||||
>
|
||||
Предрегистрация
|
||||
</Button>
|
||||
)}
|
||||
|
||||
}}
|
||||
sxcont={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
svg: { color: "#000000" },
|
||||
padding: isMobile ? 0 : "0 22px 0 40px"
|
||||
}}
|
||||
<Button disableRipple variant="text" onClick={handleClickOpen}>
|
||||
<MenuIcon />
|
||||
</Button>
|
||||
<Dialog
|
||||
fullScreen
|
||||
sx={{ width: isMobile ? "100%" : "320px", ml: "auto", height: "100%" }}
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
TransitionComponent={Transition}
|
||||
>
|
||||
<AppBar
|
||||
sx={{
|
||||
position: "relative",
|
||||
background: theme === "dark" ? "#252734" : "#F2F3F7",
|
||||
boxShadow: "none",
|
||||
height: isMobile ? "66px" : "100px",
|
||||
}}
|
||||
>
|
||||
<Toolbar
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
svg: { color: theme === "dark" ? "#ffffff" : "#000000" },
|
||||
pt: "12px",
|
||||
}}
|
||||
>
|
||||
<Box sx={{ bgcolor: "none", paddingTop: isMobile? "6px" : 0 }}>
|
||||
<Logotip width={150}/>
|
||||
</Box>
|
||||
{!isMobile && (
|
||||
<Button
|
||||
// onClick={() => setIsContactFormOpen(true)}
|
||||
disableRipple
|
||||
sx={{
|
||||
color: "black",
|
||||
border: "1px solid black",
|
||||
ml: "auto",
|
||||
mr: "38px",
|
||||
textTransform: "none",
|
||||
fontWeight: "400",
|
||||
fontSize: "18px",
|
||||
lineHeight: "24px",
|
||||
borderRadius: "8px",
|
||||
padding: "8px 17px",
|
||||
"&:hover": {
|
||||
background: "rgba(126, 42, 234, 0.07)",
|
||||
bgcolor: "#7E2AEA",
|
||||
},
|
||||
}}
|
||||
>
|
||||
Предрегистрация
|
||||
</Button>
|
||||
)}
|
||||
|
||||
<Button disableRipple variant="text" onClick={handleClickOpen}>
|
||||
<MenuIcon />
|
||||
</Button>
|
||||
<Dialog
|
||||
fullScreen
|
||||
sx={{ width: isMobile ? "100%" : "320px", ml: "auto", height: "100%" }}
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
TransitionComponent={Transition}
|
||||
>
|
||||
<AppBar
|
||||
sx={{
|
||||
position: "relative",
|
||||
background: theme === "dark" ? "#252734" : "#F2F3F7",
|
||||
boxShadow: "none",
|
||||
height: isMobile ? "66px" : "100px",
|
||||
}}
|
||||
>
|
||||
<Toolbar
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
svg: { color: theme === "dark" ? "#ffffff" : "#000000" },
|
||||
pt: "12px",
|
||||
}}
|
||||
>
|
||||
{isMobile && (
|
||||
<Logotip width={150}/>
|
||||
)}
|
||||
<IconButton
|
||||
sx={{ ml: "auto" }}
|
||||
edge="start"
|
||||
color="inherit"
|
||||
onClick={handleClose}
|
||||
aria-label="close"
|
||||
>
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
<List
|
||||
sx={{
|
||||
background: theme === "dark" ? "#252734" : "#F2F3F7",
|
||||
height: "100vh",
|
||||
p: "0",
|
||||
}}
|
||||
>
|
||||
{/*<ListItem*/}
|
||||
{/* sx={{*/}
|
||||
{/* pl: "40px",*/}
|
||||
{/* flexDirection: "column",*/}
|
||||
{/* alignItems: isMobile ? "stretch" : "end",*/}
|
||||
{/* }}*/}
|
||||
{/*>*/}
|
||||
{/* {buttonMenu.map(({ path, title }) => (*/}
|
||||
{/* <Link*/}
|
||||
{/* key={path}*/}
|
||||
{/* to={path}*/}
|
||||
{/* style={{*/}
|
||||
{/* textDecoration: "none",*/}
|
||||
{/* height: "20px",*/}
|
||||
{/* marginBottom: "25px",*/}
|
||||
{/* }}*/}
|
||||
{/* >*/}
|
||||
{/* <Button*/}
|
||||
{/* disableRipple*/}
|
||||
{/* variant="text"*/}
|
||||
{/* sx={{*/}
|
||||
{/* color:*/}
|
||||
{/* location.pathname === path*/}
|
||||
{/* ? "#7E2AEA"*/}
|
||||
{/* : theme === "dark"*/}
|
||||
{/* ? "white"*/}
|
||||
{/* : "black",*/}
|
||||
{/* height: "20px",*/}
|
||||
{/* textTransform: "none",*/}
|
||||
{/* fontSize: "16px",*/}
|
||||
{/* "&:hover": {*/}
|
||||
{/* background: "none",*/}
|
||||
{/* color: "#7E2AEA",*/}
|
||||
{/* },*/}
|
||||
{/* }}*/}
|
||||
{/* >*/}
|
||||
{/* {title}*/}
|
||||
{/* </Button>*/}
|
||||
{/* </Link>*/}
|
||||
{/* ))}*/}
|
||||
{/*</ListItem>*/}
|
||||
{isMobile ? (
|
||||
<Button
|
||||
// onClick={() => setIsContactFormOpen(true)}
|
||||
variant="outlined"
|
||||
sx={{
|
||||
position: "absolute",
|
||||
bottom: 0,
|
||||
mb: "60px",
|
||||
width: "188px",
|
||||
color: theme === "dark" ? "white" : "black",
|
||||
border: "1px solid black",
|
||||
ml: "40px",
|
||||
mt: "180px",
|
||||
textTransform: "none",
|
||||
fontWeight: "400",
|
||||
fontSize: "18px",
|
||||
lineHeight: "24px",
|
||||
borderRadius: "8px",
|
||||
padding: "8px 17px",
|
||||
}}
|
||||
>
|
||||
Предрегистрация
|
||||
</Button>
|
||||
) : (
|
||||
<Box
|
||||
sx={{
|
||||
position: "absolute",
|
||||
right: "40px",
|
||||
bottom: "60px",
|
||||
}}
|
||||
>
|
||||
<Logotip width={150}/>
|
||||
</Box>
|
||||
)}
|
||||
</List>
|
||||
</Dialog>
|
||||
</SectionStyled>
|
||||
<Box sx={{height: isMobile ? "50px" : {height}}} />
|
||||
</>
|
||||
);
|
||||
{isMobile && <Logotip width={150} />}
|
||||
<IconButton sx={{ ml: "auto" }} edge="start" color="inherit" onClick={handleClose} aria-label="close">
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
<List
|
||||
sx={{
|
||||
background: theme === "dark" ? "#252734" : "#F2F3F7",
|
||||
height: "100vh",
|
||||
p: "0",
|
||||
}}
|
||||
>
|
||||
{/*<ListItem*/}
|
||||
{/* sx={{*/}
|
||||
{/* pl: "40px",*/}
|
||||
{/* flexDirection: "column",*/}
|
||||
{/* alignItems: isMobile ? "stretch" : "end",*/}
|
||||
{/* }}*/}
|
||||
{/*>*/}
|
||||
{/* {buttonMenu.map(({ path, title }) => (*/}
|
||||
{/* <Link*/}
|
||||
{/* key={path}*/}
|
||||
{/* to={path}*/}
|
||||
{/* style={{*/}
|
||||
{/* textDecoration: "none",*/}
|
||||
{/* height: "20px",*/}
|
||||
{/* marginBottom: "25px",*/}
|
||||
{/* }}*/}
|
||||
{/* >*/}
|
||||
{/* <Button*/}
|
||||
{/* disableRipple*/}
|
||||
{/* variant="text"*/}
|
||||
{/* sx={{*/}
|
||||
{/* color:*/}
|
||||
{/* location.pathname === path*/}
|
||||
{/* ? "#7E2AEA"*/}
|
||||
{/* : theme === "dark"*/}
|
||||
{/* ? "white"*/}
|
||||
{/* : "black",*/}
|
||||
{/* height: "20px",*/}
|
||||
{/* textTransform: "none",*/}
|
||||
{/* fontSize: "16px",*/}
|
||||
{/* "&:hover": {*/}
|
||||
{/* background: "none",*/}
|
||||
{/* color: "#7E2AEA",*/}
|
||||
{/* },*/}
|
||||
{/* }}*/}
|
||||
{/* >*/}
|
||||
{/* {title}*/}
|
||||
{/* </Button>*/}
|
||||
{/* </Link>*/}
|
||||
{/* ))}*/}
|
||||
{/*</ListItem>*/}
|
||||
{isMobile ? (
|
||||
<Button
|
||||
// onClick={() => setIsContactFormOpen(true)}
|
||||
variant="outlined"
|
||||
sx={{
|
||||
position: "absolute",
|
||||
bottom: 0,
|
||||
mb: "60px",
|
||||
width: "188px",
|
||||
color: theme === "dark" ? "white" : "black",
|
||||
border: "1px solid black",
|
||||
ml: "40px",
|
||||
mt: "180px",
|
||||
textTransform: "none",
|
||||
fontWeight: "400",
|
||||
fontSize: "18px",
|
||||
lineHeight: "24px",
|
||||
borderRadius: "8px",
|
||||
padding: "8px 17px",
|
||||
}}
|
||||
>
|
||||
Предрегистрация
|
||||
</Button>
|
||||
) : (
|
||||
<Box
|
||||
sx={{
|
||||
position: "absolute",
|
||||
right: "40px",
|
||||
bottom: "60px",
|
||||
}}
|
||||
>
|
||||
<Logotip width={150} />
|
||||
</Box>
|
||||
)}
|
||||
</List>
|
||||
</Dialog>
|
||||
</SectionStyled>
|
||||
<Box sx={{ height: isMobile ? "50px" : { height } }} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
|
||||
import { ResultSettings } from "./ResultSettings"
|
||||
import { ResultSettings } from "./ResultSettings";
|
||||
import { createFrontResult } from "@root/questions/actions";
|
||||
import { useQuestionsStore } from "@root/questions/store";
|
||||
import { useCurrentQuiz } from "@root/quizes/hooks";
|
||||
@ -7,6 +6,8 @@ import { Box, Typography, useTheme, useMediaQuery, Button } from "@mui/material"
|
||||
import image from "../../assets/Rectangle 110.png";
|
||||
import { enqueueSnackbar } from "notistack";
|
||||
import { AnyTypedQuizQuestion } from "@model/questionTypes/shared";
|
||||
import ArrowLeft from "../../assets/icons/questionsPage/arrowLeft";
|
||||
import { decrementCurrentStep } from "@root/quizes/actions";
|
||||
|
||||
export const FirstEntry = () => {
|
||||
const theme = useTheme();
|
||||
@ -17,16 +18,20 @@ export const FirstEntry = () => {
|
||||
const create = () => {
|
||||
if (quiz?.config.haveRoot) {
|
||||
questions
|
||||
.filter((question:AnyTypedQuizQuestion) => {
|
||||
return question.type !== null && question.content.rule.parentId.length !== 0 && question.content.rule.children.length === 0
|
||||
})
|
||||
.forEach(question => {
|
||||
createFrontResult(quiz.id, question.content.id)
|
||||
})
|
||||
.filter((question: AnyTypedQuizQuestion) => {
|
||||
return (
|
||||
question.type !== null &&
|
||||
question.content.rule.parentId.length !== 0 &&
|
||||
question.content.rule.children.length === 0
|
||||
);
|
||||
})
|
||||
.forEach((question) => {
|
||||
createFrontResult(quiz.id, question.content.id);
|
||||
});
|
||||
} else {
|
||||
createFrontResult(quiz.id, "line")
|
||||
createFrontResult(quiz.id, "line");
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
@ -53,7 +58,7 @@ export const FirstEntry = () => {
|
||||
mr: !isSmallMonitor ? "104px" : 0,
|
||||
marginBottom: isSmallMonitor ? "20px" : 0,
|
||||
position: "relative",
|
||||
height: "100%"
|
||||
height: "100%",
|
||||
}}
|
||||
>
|
||||
<Typography variant="h5" sx={{ marginBottom: "20px" }}>
|
||||
@ -69,7 +74,10 @@ export const FirstEntry = () => {
|
||||
}}
|
||||
>
|
||||
<Typography sx={{ color: "#4D4D4D", width: "95%" }}>
|
||||
Вы можете показывать разные результаты квиза (добавьте описание, изображение, стоимость и т.п.) разным пользователям, нужно только их создать и проставить условия. Таким образом ваш квиз получится максимально индивидуальным для каждого клиента. Показывайте картинку/видео вместо результата или переадресовывайте пользователя по нужной ссылке.
|
||||
Вы можете показывать разные результаты квиза (добавьте описание, изображение, стоимость и т.п.) разным
|
||||
пользователям, нужно только их создать и проставить условия. Таким образом ваш квиз получится максимально
|
||||
индивидуальным для каждого клиента. Показывайте картинку/видео вместо результата или переадресовывайте
|
||||
пользователя по нужной ссылке.
|
||||
</Typography>
|
||||
<Typography
|
||||
sx={{
|
||||
@ -91,21 +99,35 @@ export const FirstEntry = () => {
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
<Button
|
||||
onClick={create}
|
||||
variant="contained"
|
||||
sx={{
|
||||
backgroundColor: "#7E2AEA",
|
||||
fontSize: "18px",
|
||||
lineHeight: "18px",
|
||||
width: "216px",
|
||||
height: "44px",
|
||||
mt: "30px",
|
||||
p: "10px 20px"
|
||||
}}
|
||||
>
|
||||
Создать результаты
|
||||
</Button>
|
||||
|
||||
<Box sx={{ display: "flex", justifyContent: "flex-start", alignItems: "center", gap: "8px", mt: "30px" }}>
|
||||
<Button
|
||||
variant="outlined"
|
||||
sx={{
|
||||
padding: "10px 20px",
|
||||
borderRadius: "8px",
|
||||
height: "44px",
|
||||
}}
|
||||
onClick={decrementCurrentStep}
|
||||
>
|
||||
<ArrowLeft />
|
||||
</Button>
|
||||
<Button
|
||||
onClick={create}
|
||||
variant="contained"
|
||||
sx={{
|
||||
backgroundColor: "#7E2AEA",
|
||||
fontSize: "18px",
|
||||
lineHeight: "18px",
|
||||
width: "216px",
|
||||
height: "44px",
|
||||
|
||||
p: "10px 20px",
|
||||
}}
|
||||
>
|
||||
Создать результаты
|
||||
</Button>
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
@ -1,12 +1,4 @@
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
SxProps,
|
||||
Theme,
|
||||
Typography,
|
||||
useMediaQuery,
|
||||
useTheme,
|
||||
} from "@mui/material";
|
||||
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";
|
||||
@ -16,72 +8,62 @@ import ComplexNavText from "./ComplexNavText";
|
||||
import FirstQuiz from "./FirstQuiz";
|
||||
import QuizCard from "./QuizCard";
|
||||
|
||||
|
||||
interface Props {
|
||||
outerContainerSx?: SxProps<Theme>;
|
||||
children?: React.ReactNode;
|
||||
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));
|
||||
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>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
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>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -5,6 +5,7 @@ import { decrementCurrentStep } from "@root/quizes/actions";
|
||||
import PenaLogo from "../PenaLogo";
|
||||
import CustomAvatar from "./Avatar";
|
||||
import NavMenuItem from "./NavMenuItem";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
export default function Header() {
|
||||
const theme = useTheme();
|
||||
@ -25,7 +26,9 @@ export default function Header() {
|
||||
zIndex: theme.zIndex.drawer + 1,
|
||||
}}
|
||||
>
|
||||
<PenaLogo width={124} />
|
||||
<Link to="/">
|
||||
<PenaLogo width={124} />
|
||||
</Link>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
|
||||
@ -1,11 +1,4 @@
|
||||
import {
|
||||
Box,
|
||||
Container,
|
||||
IconButton,
|
||||
Typography,
|
||||
useTheme,
|
||||
useMediaQuery,
|
||||
} from "@mui/material";
|
||||
import { Box, Container, IconButton, Typography, useTheme, useMediaQuery } from "@mui/material";
|
||||
import NavMenuItem from "./NavMenuItem";
|
||||
import PenaLogo from "../PenaLogo";
|
||||
import WalletIcon from "@icons/WalletIcon";
|
||||
@ -13,7 +6,7 @@ import CustomAvatar from "./Avatar";
|
||||
import { Burger } from "@icons/Burger";
|
||||
import { clearAuthToken } from "@frontend/kitui";
|
||||
import { logout } from "@api/auth";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
import { enqueueSnackbar } from "notistack";
|
||||
import { clearUserData } from "@root/user";
|
||||
import { LogoutButton } from "@ui_kit/LogoutButton";
|
||||
@ -59,7 +52,9 @@ export default function HeaderFull() {
|
||||
style={{ fontSize: "30px", color: "#000000", cursor: "pointer" }}
|
||||
/>
|
||||
)}
|
||||
<PenaLogo width={124} />
|
||||
<Link to="/">
|
||||
<PenaLogo width={124} />
|
||||
</Link>
|
||||
{!isTablet && (
|
||||
<Box
|
||||
sx={{
|
||||
@ -93,10 +88,7 @@ export default function HeaderFull() {
|
||||
>
|
||||
Мой баланс
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
color={theme.palette.brightPurple.main}
|
||||
>
|
||||
<Typography variant="body2" color={theme.palette.brightPurple.main}>
|
||||
00.00 руб.
|
||||
</Typography>
|
||||
</Box>
|
||||
@ -112,12 +104,12 @@ export default function HeaderFull() {
|
||||
width: "36px",
|
||||
}}
|
||||
/>
|
||||
<LogoutButton
|
||||
onClick={handleLogoutClick}
|
||||
sx={{
|
||||
ml: "20px",
|
||||
}}
|
||||
/>
|
||||
<LogoutButton
|
||||
onClick={handleLogoutClick}
|
||||
sx={{
|
||||
ml: "20px",
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user