42 lines
1.4 KiB
TypeScript
42 lines
1.4 KiB
TypeScript
import { Button, useTheme } from "@mui/material";
|
|
import { useRootContainerSize } from "../../../contexts/RootContainerWidthContext";
|
|
import { quizThemes } from "@utils/themes/Publication/themePublication";
|
|
import { useQuizSettings } from "@contexts/QuizDataContext";
|
|
|
|
interface Props {
|
|
isPreviousButtonEnabled: boolean;
|
|
moveToPrevQuestion: () => void;
|
|
}
|
|
|
|
export default function PrevButton({ isPreviousButtonEnabled, moveToPrevQuestion }: Props) {
|
|
const theme = useTheme();
|
|
const { settings } = useQuizSettings();
|
|
const isMobileMini = useRootContainerSize() < 382;
|
|
return (
|
|
<Button
|
|
disabled={!isPreviousButtonEnabled}
|
|
variant="contained"
|
|
sx={{
|
|
ml: "auto",
|
|
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 ? "←" : "← Back"}
|
|
</Button>
|
|
);
|
|
}
|