98 lines
3.7 KiB
TypeScript
98 lines
3.7 KiB
TypeScript
import {Box, Link, useTheme} from "@mui/material";
|
|
|
|
import { Footer } from "./Footer";
|
|
import { Date } from "./questions/Date";
|
|
import { Emoji } from "./questions/Emoji";
|
|
import { File } from "./questions/File";
|
|
import { Images } from "./questions/Images";
|
|
import { Number } from "./questions/Number";
|
|
import { Page } from "./questions/Page";
|
|
import { Rating } from "./questions/Rating";
|
|
import { Select } from "./questions/Select";
|
|
import { Text } from "./questions/Text";
|
|
import { Variant } from "./questions/Variant";
|
|
import { Varimg } from "./questions/Varimg";
|
|
|
|
import type { RealTypedQuizQuestion } from "../../model/questionTypes/shared";
|
|
|
|
import { NameplateLogoFQ } from "@icons/NameplateLogoFQ";
|
|
import { NameplateLogoFQDark } from "@icons/NameplateLogoFQDark";
|
|
import { useQuizData } from "@contexts/QuizDataContext";
|
|
import { notReachable } from "@utils/notReachable";
|
|
import { quizThemes } from "@utils/themes/Publication/themePublication";
|
|
import { ReactNode } from "react";
|
|
import { useRootContainerSize } from "../../contexts/RootContainerWidthContext";
|
|
|
|
type Props = {
|
|
currentQuestion: RealTypedQuizQuestion;
|
|
currentQuestionStepNumber: number | null;
|
|
nextButton: ReactNode;
|
|
prevButton: ReactNode;
|
|
};
|
|
|
|
export const Question = ({
|
|
currentQuestion,
|
|
currentQuestionStepNumber,
|
|
nextButton,
|
|
prevButton,
|
|
}: Props) => {
|
|
const theme = useTheme();
|
|
const { settings } = useQuizData();
|
|
const isMobile = useRootContainerSize() < 650;
|
|
console.log(settings)
|
|
return (
|
|
<Box sx={{
|
|
backgroundColor: theme.palette.background.default,
|
|
height: isMobile ? "100%" : "100vh"
|
|
}}>
|
|
<Box sx={{
|
|
height: "calc(100% - 75px)",
|
|
width: "100%",
|
|
maxWidth: "1440px",
|
|
padding: "40px 25px 20px",
|
|
margin: "0 auto",
|
|
overflow: "auto",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
justifyContent: "space-between"
|
|
}}>
|
|
<QuestionByType key={currentQuestion.id} question={currentQuestion} />
|
|
{quizThemes[settings.cfg.theme].isLight ? (
|
|
<Link target={"_blank"} href={"https://quiz.pena.digital"}>
|
|
<NameplateLogoFQ style={{ fontSize: "34px", width: "200px", height: "auto" }} />
|
|
</Link>
|
|
) : (
|
|
<Link target={"_blank"} href={"https://quiz.pena.digital"}>
|
|
<NameplateLogoFQDark style={{ fontSize: "34px", width: "200px", height: "auto" }} />
|
|
</Link>
|
|
|
|
)}
|
|
</Box>
|
|
<Footer
|
|
stepNumber={currentQuestionStepNumber}
|
|
prevButton={prevButton}
|
|
nextButton={nextButton}
|
|
/>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
function QuestionByType({ question }: {
|
|
question: RealTypedQuizQuestion;
|
|
}) {
|
|
switch (question.type) {
|
|
case "variant": return <Variant currentQuestion={question} />;
|
|
case "images": return <Images currentQuestion={question} />;
|
|
case "varimg": return <Varimg currentQuestion={question} />;
|
|
case "emoji": return <Emoji currentQuestion={question} />;
|
|
case "text": return <Text currentQuestion={question} />;
|
|
case "select": return <Select currentQuestion={question} />;
|
|
case "date": return <Date currentQuestion={question} />;
|
|
case "number": return <Number currentQuestion={question} />;
|
|
case "file": return <File currentQuestion={question} />;
|
|
case "page": return <Page currentQuestion={question} />;
|
|
case "rating": return <Rating currentQuestion={question} />;
|
|
default: notReachable(question);
|
|
}
|
|
}
|