56 lines
1.8 KiB
TypeScript
56 lines
1.8 KiB
TypeScript
|
import lightTheme from "@/utils/themes/light";
|
|||
|
|
import { Button, ThemeProvider } from "@mui/material";
|
|||
|
|
import { useState } from "react";
|
|||
|
|
import { createPortal } from "react-dom";
|
|||
|
|
import QuizDialog from "../QuizDialog";
|
|||
|
|
|
|||
|
|
|
|||
|
|
interface Props {
|
|||
|
|
selector?: string;
|
|||
|
|
fixedSide?: "left" | "right";
|
|||
|
|
quizId: string;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default function OpenQuizButton({ selector, quizId, fixedSide }: Props) {
|
|||
|
|
const [isQuizDialogOpen, setIsQuizDialogOpen] = useState<boolean>(false);
|
|||
|
|
|
|||
|
|
const portalContainer = !fixedSide && selector ? document.getElementById(selector)! : document.body;
|
|||
|
|
|
|||
|
|
return createPortal(
|
|||
|
|
<ThemeProvider theme={lightTheme}>
|
|||
|
|
<Button
|
|||
|
|
className="pena-quiz-widget-button"
|
|||
|
|
onClick={() => setIsQuizDialogOpen(p => !p)}
|
|||
|
|
variant="contained"
|
|||
|
|
sx={[
|
|||
|
|
{
|
|||
|
|
// generic styles
|
|||
|
|
},
|
|||
|
|
Boolean(fixedSide) && {
|
|||
|
|
position: "fixed",
|
|||
|
|
bottom: "50%",
|
|||
|
|
},
|
|||
|
|
fixedSide === "left" && {
|
|||
|
|
left: 0,
|
|||
|
|
transformOrigin: "left",
|
|||
|
|
transform: "rotate(-90deg) translateY(50%) translateX(-50%)",
|
|||
|
|
},
|
|||
|
|
fixedSide === "right" && {
|
|||
|
|
right: 0,
|
|||
|
|
transformOrigin: "right",
|
|||
|
|
transform: "rotate(-90deg) translateY(-50%) translateX(50%)",
|
|||
|
|
},
|
|||
|
|
]}
|
|||
|
|
>
|
|||
|
|
Пройти квиз
|
|||
|
|
</Button>
|
|||
|
|
<QuizDialog
|
|||
|
|
open={isQuizDialogOpen}
|
|||
|
|
quizId={quizId}
|
|||
|
|
onClose={() => setIsQuizDialogOpen(false)}
|
|||
|
|
/>
|
|||
|
|
</ThemeProvider>,
|
|||
|
|
portalContainer
|
|||
|
|
);
|
|||
|
|
}
|