51 lines
1.6 KiB
TypeScript
51 lines
1.6 KiB
TypeScript
import lightTheme from "@/utils/themes/light";
|
||
import { Button, ThemeProvider } from "@mui/material";
|
||
import { useState } from "react";
|
||
import QuizDialog from "../shared/QuizDialog";
|
||
|
||
|
||
interface Props {
|
||
fixedSide?: "left" | "right";
|
||
quizId: string;
|
||
}
|
||
|
||
export default function OpenQuizButton({ quizId, fixedSide }: Props) {
|
||
const [isQuizDialogOpen, setIsQuizDialogOpen] = useState<boolean>(false);
|
||
|
||
return (
|
||
<ThemeProvider theme={lightTheme}>
|
||
<Button
|
||
className="pena-quiz-widget-button"
|
||
onClick={() => setIsQuizDialogOpen(p => !p)}
|
||
variant="contained"
|
||
sx={[
|
||
{
|
||
// normal 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>
|
||
);
|
||
}
|