55 lines
1.4 KiB
TypeScript
55 lines
1.4 KiB
TypeScript
import { ReactNode } from "react";
|
||
import { Box, Typography, useTheme } from "@mui/material";
|
||
|
||
import { useQuizSettings } 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 } = useQuizSettings();
|
||
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",
|
||
}}
|
||
>
|
||
{stepNumber !== null && (
|
||
<Box sx={{ flexGrow: 1 }}>
|
||
<Typography sx={{ color: theme.palette.text.primary }}>
|
||
Вопрос {stepNumber} из {questionsAmount}
|
||
</Typography>
|
||
<Stepper activeStep={stepNumber} steps={questionsAmount} />
|
||
</Box>
|
||
)}
|
||
{prevButton}
|
||
{nextButton}
|
||
</Box>
|
||
</Box>
|
||
);
|
||
};
|