73 lines
1.8 KiB
TypeScript
73 lines
1.8 KiB
TypeScript
|
import { Box } from "@mui/material";
|
||
|
|
|
||
|
|
import { Variant } from "./questions/Variant";
|
||
|
|
import { Images } from "./questions/Images";
|
||
|
|
import { Varimg } from "./questions/Varimg";
|
||
|
|
import { Emoji } from "./questions/Emoji";
|
||
|
|
import { Text } from "./questions/Text";
|
||
|
|
import { Select } from "./questions/Select";
|
||
|
|
import { Date } from "./questions/Date";
|
||
|
|
import { Number } from "./questions/Number";
|
||
|
|
import { File } from "./questions/File";
|
||
|
|
import { Page } from "./questions/Page";
|
||
|
|
import { Rating } from "./questions/Rating";
|
||
|
|
import { Footer } from "./Footer";
|
||
|
|
|
||
|
|
import type { FC } from "react";
|
||
|
|
import type { QuestionType } from "../../model/question/question";
|
||
|
|
import type { AnyTypedQuizQuestion } from "../../model/questionTypes/shared";
|
||
|
|
|
||
|
|
type QuestionProps = {
|
||
|
|
stepNumber: number;
|
||
|
|
setStepNumber: (step: number) => void;
|
||
|
|
questions: AnyTypedQuizQuestion[];
|
||
|
|
};
|
||
|
|
|
||
|
|
const QUESTIONS_MAP: Record<
|
||
|
|
Exclude<QuestionType, "nonselected">,
|
||
|
|
FC<{ stepNumber: number; question: any }>
|
||
|
|
> = {
|
||
|
|
variant: Variant,
|
||
|
|
images: Images,
|
||
|
|
varimg: Varimg,
|
||
|
|
emoji: Emoji,
|
||
|
|
text: Text,
|
||
|
|
select: Select,
|
||
|
|
date: Date,
|
||
|
|
number: Number,
|
||
|
|
file: File,
|
||
|
|
page: Page,
|
||
|
|
rating: Rating,
|
||
|
|
};
|
||
|
|
|
||
|
|
export const Question = ({
|
||
|
|
stepNumber,
|
||
|
|
setStepNumber,
|
||
|
|
questions,
|
||
|
|
}: QuestionProps) => {
|
||
|
|
const question = questions[stepNumber - 1] as AnyTypedQuizQuestion;
|
||
|
|
const QuestionComponent =
|
||
|
|
QUESTIONS_MAP[question.type as Exclude<QuestionType, "nonselected">];
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Box>
|
||
|
|
<Box
|
||
|
|
sx={{
|
||
|
|
minHeight: "calc(100vh - 75px)",
|
||
|
|
width: "100%",
|
||
|
|
maxWidth: "1000px",
|
||
|
|
padding: "20px 10px 0",
|
||
|
|
margin: "0 auto",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<QuestionComponent question={question} stepNumber={stepNumber} />
|
||
|
|
</Box>
|
||
|
|
<Footer
|
||
|
|
stepNumber={stepNumber}
|
||
|
|
setStepNumber={setStepNumber}
|
||
|
|
questions={questions}
|
||
|
|
/>
|
||
|
|
</Box>
|
||
|
|
);
|
||
|
|
};
|