41 lines
1.0 KiB
TypeScript
41 lines
1.0 KiB
TypeScript
import { useQuizStore } from "@/stores/useQuizStore";
|
|
import { Button, Skeleton } from "@mui/material";
|
|
import { quizThemes } from "@utils/themes/Publication/themePublication";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
interface Props {
|
|
isNextButtonEnabled: boolean;
|
|
moveToNextQuestion: () => void;
|
|
}
|
|
|
|
export default function NextButton({ isNextButtonEnabled, moveToNextQuestion }: Props) {
|
|
const { settings, nextLoading } = useQuizStore();
|
|
const { t } = useTranslation();
|
|
|
|
return nextLoading ? (
|
|
<Skeleton
|
|
variant="rectangular"
|
|
sx={{
|
|
borderRadius: "8px",
|
|
width: "96px",
|
|
height: "44px",
|
|
}}
|
|
/>
|
|
) : (
|
|
<Button
|
|
disabled={!isNextButtonEnabled}
|
|
variant="contained"
|
|
sx={{
|
|
fontSize: "16px",
|
|
padding: "10px 15px",
|
|
"&:disabled": {
|
|
background: quizThemes[settings.cfg.theme].isLight ? "#F2F3F7" : "#FFFFFF26",
|
|
},
|
|
}}
|
|
onClick={moveToNextQuestion}
|
|
>
|
|
{t("Next")} →
|
|
</Button>
|
|
);
|
|
}
|