98 lines
2.7 KiB
TypeScript
98 lines
2.7 KiB
TypeScript
import { ReactNode } from "react";
|
||
import { Box, Typography, useTheme } from "@mui/material";
|
||
|
||
import { useQuizData } from "@contexts/QuizDataContext";
|
||
|
||
import Stepper from "@ui_kit/Stepper";
|
||
|
||
type FooterProps = {
|
||
stepNumber: number | null;
|
||
nextButton: ReactNode;
|
||
prevButton: ReactNode;
|
||
};
|
||
|
||
export const Footer = ({ stepNumber, nextButton, prevButton }: FooterProps) => {
|
||
const theme = useTheme();
|
||
const { questions, settings } = useQuizData();
|
||
const questionsAmount = questions.filter(
|
||
({ type }) => type !== "result"
|
||
).length;
|
||
|
||
return (
|
||
<Box
|
||
sx={{
|
||
position: "relative",
|
||
padding: "15px 0",
|
||
borderTop: `1px solid #9A9AAF80`,
|
||
height: "75px",
|
||
display: "flex",
|
||
background: settings.cfg.design
|
||
? "rgba(154,154,175, 0.2)"
|
||
: "transparent",
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{
|
||
width: "100%",
|
||
maxWidth: "1410px",
|
||
padding: "10px",
|
||
margin: "0 auto",
|
||
display: "flex",
|
||
alignItems: "center",
|
||
gap: "10px",
|
||
}}
|
||
>
|
||
{/*{mode[settings.cfg.theme] ? (*/}
|
||
{/* <NameplateLogoFQ style={{ fontSize: "34px", width:"200px", height:"auto" }} />*/}
|
||
{/*):(*/}
|
||
{/* <NameplateLogoFQDark style={{ fontSize: "34px", width:"200px", height:"auto" }} />*/}
|
||
{/*)}*/}
|
||
{
|
||
questions.every(({ content }) => content.rule.parentId !== "root") !== null // null when branching enabled
|
||
&&
|
||
stepNumber !== null && (
|
||
<Box sx={{ flexGrow: 1 }}>
|
||
<Typography sx={{ color: theme.palette.text.primary }}>
|
||
Вопрос {stepNumber} из {questionsAmount}
|
||
</Typography>
|
||
<Stepper activeStep={stepNumber} steps={questionsAmount} />
|
||
</Box>
|
||
)}
|
||
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
alignItems: "center",
|
||
gap: "10px",
|
||
marginRight: "auto",
|
||
// color: theme.palette.grey1.main,
|
||
}}
|
||
>
|
||
{/* <Typography>Шаг</Typography>
|
||
<Typography
|
||
sx={{
|
||
display: "flex",
|
||
justifyContent: "center",
|
||
alignItems: "center",
|
||
fontWeight: "bold",
|
||
borderRadius: "50%",
|
||
width: "30px",
|
||
height: "30px",
|
||
color: "#FFF",
|
||
background: theme.palette.brightPurple.main,
|
||
}}
|
||
>
|
||
{stepNumber} */}
|
||
{/* </Typography> */}
|
||
{/* <Typography>Из</Typography>
|
||
<Typography sx={{ fontWeight: "bold" }}>
|
||
{questions.length}
|
||
</Typography> */}
|
||
</Box>
|
||
{prevButton}
|
||
{nextButton}
|
||
</Box>
|
||
</Box>
|
||
);
|
||
};
|