38 lines
1.5 KiB
TypeScript
38 lines
1.5 KiB
TypeScript
|
import {Button, useTheme} from "@mui/material";
|
||
|
|
import {useRootContainerSize} from "../../../contexts/RootContainerWidthContext";
|
||
|
|
import { quizThemes } from "@utils/themes/Publication/themePublication";
|
||
|
|
import { useQuizData } from "@contexts/QuizDataContext";
|
||
|
|
|
||
|
|
interface Props{
|
||
|
|
isPreviousButtonEnabled: boolean,
|
||
|
|
moveToPrevQuestion: () => void,
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function PrevButton ({isPreviousButtonEnabled, moveToPrevQuestion}: Props) {
|
||
|
|
const theme = useTheme();
|
||
|
|
const { settings } = useQuizData();
|
||
|
|
const isMobileMini = useRootContainerSize() < 382;
|
||
|
|
return(
|
||
|
|
<Button
|
||
|
|
disabled={!isPreviousButtonEnabled}
|
||
|
|
variant="contained"
|
||
|
|
sx={{
|
||
|
|
fontSize: "16px",
|
||
|
|
padding: "10px 15px",
|
||
|
|
color: quizThemes[settings.cfg.theme].isLight ? theme.palette.primary.main : "#FFFFFF",
|
||
|
|
border: quizThemes[settings.cfg.theme].isLight ? `1px solid ${theme.palette.primary.main}` : "1px solid #9A9AAF",
|
||
|
|
background: quizThemes[settings.cfg.theme].isLight ? "#FFFFFF" : "#FFFFFF26",
|
||
|
|
"&:hover": {
|
||
|
|
color: "#FFFFFF",
|
||
|
|
border: `1px solid ${theme.palette.primary.dark}`,
|
||
|
|
},
|
||
|
|
"&:disabled": {
|
||
|
|
background: quizThemes[settings.cfg.theme].isLight ? "#F2F3F7" : "#FFFFFF26"
|
||
|
|
},
|
||
|
|
}}
|
||
|
|
onClick={moveToPrevQuestion}
|
||
|
|
>
|
||
|
|
{isMobileMini ? "←" : "← Назад"}
|
||
|
|
</Button>
|
||
|
|
)
|
||
|
|
}
|