124 lines
3.4 KiB
TypeScript
124 lines
3.4 KiB
TypeScript
import { Box, Link, useTheme } from "@mui/material";
|
|
|
|
import { Footer } from "./Footer";
|
|
import { Text } from "./questions/Text";
|
|
|
|
import type { RealTypedQuizQuestion } from "../../model/questionTypes/shared";
|
|
|
|
import { NameplateLogoFQ } from "@icons/NameplateLogoFQ";
|
|
import { NameplateLogoFQDark } from "@icons/NameplateLogoFQDark";
|
|
import { quizThemes } from "@utils/themes/Publication/themePublication";
|
|
|
|
import { DESIGN_LIST } from "@/utils/designList";
|
|
import { type ReactNode } from "react";
|
|
import { isProduction } from "@/utils/defineDomain";
|
|
import { useQuizStore } from "@/stores/useQuizStore";
|
|
|
|
type Props = {
|
|
currentQuestion: RealTypedQuizQuestion;
|
|
currentQuestionStepNumber: number | null;
|
|
nextButton: ReactNode;
|
|
prevButton: ReactNode;
|
|
questionSelect: ReactNode;
|
|
};
|
|
|
|
export const Question = ({
|
|
currentQuestion,
|
|
currentQuestionStepNumber,
|
|
nextButton,
|
|
prevButton,
|
|
questionSelect,
|
|
}: Props) => {
|
|
const theme = useTheme();
|
|
const { settings, show_badge, quizId } = useQuizStore();
|
|
|
|
return (
|
|
<Box
|
|
sx={{
|
|
height: "100%",
|
|
backgroundPosition: "center",
|
|
backgroundSize: "cover",
|
|
backgroundImage: settings.cfg.design ? `url(${DESIGN_LIST[settings.cfg.theme]})` : null,
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
height: "100%",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
background: settings.cfg.design
|
|
? quizThemes[settings.cfg.theme].isLight
|
|
? "transparent"
|
|
: "linear-gradient(90deg,#272626, transparent)"
|
|
: theme.palette.background.default,
|
|
overflow: "hidden",
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
overflow: "auto",
|
|
width: "100%",
|
|
flexGrow: 1,
|
|
scrollbarWidth: "none",
|
|
"&::-webkit-scrollbar": {
|
|
width: 0,
|
|
},
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
width: "100%",
|
|
minHeight: "100%",
|
|
maxWidth: "1440px",
|
|
padding: "40px 25px 20px",
|
|
margin: "0 auto",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
justifyContent: "space-between",
|
|
}}
|
|
>
|
|
<Text
|
|
currentQuestion={currentQuestion}
|
|
stepNumber={currentQuestionStepNumber}
|
|
/>
|
|
{show_badge && (
|
|
<Link
|
|
target="_blank"
|
|
href={`https://${isProduction ? "" : "s"}quiz.pena.digital/answer/v1.0.0/logo?q=${quizId}`}
|
|
sx={{
|
|
mt: "20px",
|
|
alignSelf: "end",
|
|
}}
|
|
>
|
|
{quizThemes[settings.cfg.theme].isLight ? (
|
|
<NameplateLogoFQ
|
|
style={{
|
|
fontSize: "34px",
|
|
width: "200px",
|
|
height: "auto",
|
|
}}
|
|
/>
|
|
) : (
|
|
<NameplateLogoFQDark
|
|
style={{
|
|
fontSize: "34px",
|
|
width: "200px",
|
|
height: "auto",
|
|
}}
|
|
/>
|
|
)}
|
|
</Link>
|
|
)}
|
|
</Box>
|
|
</Box>
|
|
{questionSelect}
|
|
<Footer
|
|
stepNumber={currentQuestionStepNumber}
|
|
prevButton={prevButton}
|
|
nextButton={nextButton}
|
|
/>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
};
|