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
|
||
);
|
||
}
|