74 lines
2.5 KiB
TypeScript
74 lines
2.5 KiB
TypeScript
|
import { QuizAnswerer } from "@/index";
|
|||
|
|
import lightTheme from "@/utils/themes/light";
|
|||
|
|
import { Box, Button, Grow, ThemeProvider } from "@mui/material";
|
|||
|
|
import { useState } from "react";
|
|||
|
|
import { createPortal } from "react-dom";
|
|||
|
|
|
|||
|
|
|
|||
|
|
const PADDING = 10;
|
|||
|
|
|
|||
|
|
interface Props {
|
|||
|
|
quizId: string;
|
|||
|
|
position: "left" | "right";
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default function QuizSideButton({ quizId, position }: Props) {
|
|||
|
|
const [isQuizShown, setIsQuizShown] = useState<boolean>(false);
|
|||
|
|
|
|||
|
|
return createPortal(
|
|||
|
|
<ThemeProvider theme={lightTheme}>
|
|||
|
|
{isQuizShown ? (
|
|||
|
|
<Grow in={true}>
|
|||
|
|
<Box
|
|||
|
|
sx={[
|
|||
|
|
{
|
|||
|
|
position: "fixed",
|
|||
|
|
height: `calc(min(calc(100% - ${PADDING * 2}px), 800px))`,
|
|||
|
|
width: `calc(min(calc(100% - ${PADDING * 2}px), 600px))`,
|
|||
|
|
},
|
|||
|
|
position === "left" && {
|
|||
|
|
bottom: PADDING,
|
|||
|
|
left: PADDING,
|
|||
|
|
},
|
|||
|
|
position === "right" && {
|
|||
|
|
bottom: PADDING,
|
|||
|
|
right: PADDING,
|
|||
|
|
},
|
|||
|
|
]}
|
|||
|
|
>
|
|||
|
|
<QuizAnswerer
|
|||
|
|
quizId={quizId}
|
|||
|
|
changeFaviconAndTitle={false}
|
|||
|
|
disableGlobalCss
|
|||
|
|
/>
|
|||
|
|
</Box>
|
|||
|
|
</Grow>
|
|||
|
|
) : (
|
|||
|
|
<Button
|
|||
|
|
className="pena-quiz-widget-button"
|
|||
|
|
variant="contained"
|
|||
|
|
onClick={() => setIsQuizShown(true)}
|
|||
|
|
sx={[
|
|||
|
|
{
|
|||
|
|
position: "fixed",
|
|||
|
|
height: "70px",
|
|||
|
|
width: `calc(min(calc(100% - ${PADDING * 2}px), 600px))`,
|
|||
|
|
},
|
|||
|
|
position === "left" && {
|
|||
|
|
bottom: PADDING,
|
|||
|
|
left: PADDING,
|
|||
|
|
},
|
|||
|
|
position === "right" && {
|
|||
|
|
bottom: PADDING,
|
|||
|
|
right: PADDING,
|
|||
|
|
},
|
|||
|
|
]}
|
|||
|
|
>
|
|||
|
|
Пройти квиз
|
|||
|
|
</Button>
|
|||
|
|
)}
|
|||
|
|
</ThemeProvider>,
|
|||
|
|
document.body
|
|||
|
|
);
|
|||
|
|
}
|