71 lines
1.8 KiB
TypeScript
71 lines
1.8 KiB
TypeScript
import { Box, Typography, useTheme } from "@mui/material";
|
|
import type { QuizQuestionPage } from "@model/questionTypes/page";
|
|
import QuizVideo from "@/ui_kit/VideoIframe/VideoIframe";
|
|
|
|
type PageProps = {
|
|
currentQuestion: QuizQuestionPage;
|
|
};
|
|
|
|
export const Page = ({ currentQuestion }: PageProps) => {
|
|
const theme = useTheme();
|
|
|
|
return (
|
|
<Box>
|
|
<Typography
|
|
variant="h5"
|
|
sx={{
|
|
paddingBottom: "25px",
|
|
color: theme.palette.text.primary,
|
|
wordBreak: "break-word",
|
|
}}
|
|
>
|
|
{currentQuestion.title}
|
|
</Typography>
|
|
<Typography color={theme.palette.text.primary} sx={{ wordBreak: "break-word" }}>
|
|
{currentQuestion.content.text}
|
|
</Typography>
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
width: "100%",
|
|
marginTop: "20px",
|
|
}}
|
|
>
|
|
{currentQuestion.content.useImage ? (
|
|
<Box
|
|
sx={{
|
|
borderRadius: "12px",
|
|
border: "1px solid #9A9AAF",
|
|
overflow: "hidden",
|
|
}}
|
|
>
|
|
<img
|
|
key={currentQuestion.id}
|
|
src={currentQuestion.content.back}
|
|
alt=""
|
|
style={{
|
|
display: "block",
|
|
width: "100%",
|
|
height: "100%",
|
|
objectFit: "contain",
|
|
}}
|
|
/>
|
|
</Box>
|
|
) : (
|
|
<QuizVideo
|
|
containerSX={{
|
|
width: "100%",
|
|
height: "calc(100% - 270px)",
|
|
maxHeight: "80%",
|
|
objectFit: "contain",
|
|
aspectRatio: "16 / 9",
|
|
}}
|
|
videoUrl={currentQuestion.content.video}
|
|
/>
|
|
)}
|
|
</Box>
|
|
</Box>
|
|
);
|
|
};
|