112 lines
3.8 KiB
TypeScript
112 lines
3.8 KiB
TypeScript
import { Box, Typography, useTheme } from "@mui/material";
|
||
import { ReactNode } from "react";
|
||
|
||
import { useQuizData } from "@utils/hooks/useQuizData";
|
||
|
||
type FooterProps = {
|
||
stepNumber: number | null;
|
||
nextButton: ReactNode;
|
||
prevButton: ReactNode;
|
||
};
|
||
|
||
export const Footer = ({ stepNumber, nextButton, prevButton }: FooterProps) => {
|
||
const theme = useTheme();
|
||
const { questions } = useQuizData();
|
||
console.log(questions)
|
||
|
||
return (
|
||
<Box
|
||
sx={{
|
||
position: "relative",
|
||
padding: "15px 0",
|
||
borderTop: `1px solid ${theme.palette.grey[400]}`,
|
||
height: '75px',
|
||
display: "flex",
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{
|
||
width: "100%",
|
||
maxWidth: "1000px",
|
||
padding: "0 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" }} />*/}
|
||
{/*)}*/}
|
||
{stepNumber !== null &&
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
alignItems: "center",
|
||
gap: "10px",
|
||
marginRight: "auto",
|
||
color: theme.palette.text.primary,
|
||
}}
|
||
>
|
||
<Typography>Шаг</Typography>
|
||
<Typography
|
||
sx={{
|
||
display: "flex",
|
||
justifyContent: "center",
|
||
alignItems: "center",
|
||
fontWeight: "bold",
|
||
borderRadius: "50%",
|
||
width: "30px",
|
||
height: "30px",
|
||
color: "#FFF",
|
||
background: theme.palette.primary.main,
|
||
}}
|
||
>
|
||
{stepNumber}
|
||
</Typography>
|
||
<Typography>Из</Typography>
|
||
<Typography sx={{ fontWeight: "bold" }}>
|
||
{questions.filter(q => q.type !== "result").length}
|
||
</Typography>
|
||
</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>
|
||
);
|
||
};
|