80 lines
2.3 KiB
TypeScript
80 lines
2.3 KiB
TypeScript
import QuizAnswerer from "@/components/QuizAnswerer";
|
|
import CloseIcon from '@mui/icons-material/Close';
|
|
import { Dialog, IconButton, Slide, SlideProps, SxProps, Theme } from "@mui/material";
|
|
import { forwardRef } from "react";
|
|
|
|
|
|
const SlideTransition = forwardRef<unknown, SlideProps>((props, ref) => {
|
|
return (
|
|
<Slide direction="up" ref={ref} {...props} />
|
|
);
|
|
});
|
|
|
|
interface Props {
|
|
open?: boolean;
|
|
quizId: string;
|
|
paperSx?: SxProps<Theme>;
|
|
hideBackdrop?: boolean;
|
|
disableScrollLock?: boolean;
|
|
onClose?: () => void;
|
|
}
|
|
|
|
export default function QuizDialog({
|
|
open = true,
|
|
quizId,
|
|
paperSx = [],
|
|
hideBackdrop,
|
|
disableScrollLock,
|
|
onClose
|
|
}: Props) {
|
|
|
|
return (
|
|
<Dialog
|
|
open={open}
|
|
onClose={onClose}
|
|
keepMounted
|
|
hideBackdrop={hideBackdrop}
|
|
disableScrollLock={disableScrollLock}
|
|
TransitionComponent={SlideTransition}
|
|
PaperProps={{
|
|
sx: [
|
|
{
|
|
backgroundColor: "transparent",
|
|
width: "calc(min(100%, max(70%, 700px)))",
|
|
maxWidth: "100%",
|
|
height: "80%",
|
|
maxHeight: "100%",
|
|
m: "16px",
|
|
},
|
|
...(Array.isArray(paperSx) ? paperSx : [paperSx])
|
|
]
|
|
}}
|
|
>
|
|
<QuizAnswerer
|
|
quizId={quizId}
|
|
changeFaviconAndTitle={false}
|
|
disableGlobalCss
|
|
/>
|
|
<IconButton
|
|
onClick={onClose}
|
|
sx={{
|
|
position: "absolute",
|
|
zIndex: 10,
|
|
top: 0,
|
|
right: 0,
|
|
backgroundColor: "rgba(0, 0, 0, 0.5)",
|
|
borderTopRightRadius: 0,
|
|
borderTopLeftRadius: 0,
|
|
borderBottomLeftRadius: "4px",
|
|
borderBottomRightRadius: 0,
|
|
"&:hover": {
|
|
backgroundColor: "rgba(0, 0, 0, 0.7)",
|
|
},
|
|
}}
|
|
>
|
|
<CloseIcon sx={{ color: "white" }} />
|
|
</IconButton>
|
|
</Dialog>
|
|
);
|
|
}
|