60 lines
1.6 KiB
TypeScript
60 lines
1.6 KiB
TypeScript
import { ReactNode } from "react";
|
|
import { Box, Typography, useTheme } from "@mui/material";
|
|
|
|
import { useQuizSettings } from "@contexts/QuizDataContext";
|
|
|
|
import Stepper from "@ui_kit/Stepper";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
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;
|
|
const { t } = useTranslation();
|
|
|
|
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 }}>
|
|
{t("Step")} {stepNumber} {t("of")} {questionsAmount}
|
|
</Typography>
|
|
<Stepper
|
|
activeStep={stepNumber}
|
|
steps={questionsAmount}
|
|
/>
|
|
</Box>
|
|
)}
|
|
{prevButton}
|
|
{nextButton}
|
|
</Box>
|
|
</Box>
|
|
);
|
|
};
|