55 lines
1.6 KiB
TypeScript
55 lines
1.6 KiB
TypeScript
import { Box, Typography, useTheme } from "@mui/material";
|
|
|
|
import type { QuizQuestionPage } from "../../../model/questionTypes/page";
|
|
import YoutubeEmbedIframe from "../tools/YoutubeEmbedIframe";
|
|
|
|
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>
|
|
) : (
|
|
<YoutubeEmbedIframe
|
|
containerSX={{
|
|
width: "100%",
|
|
height: "calc(100% - 270px)",
|
|
maxHeight: "80%",
|
|
objectFit: "contain",
|
|
}}
|
|
videoUrl={currentQuestion.content.video}
|
|
/>
|
|
)}
|
|
</Box>
|
|
</Box>
|
|
);
|
|
};
|