add container widget param: show button on mobile instead of quiz

src/widgets/container/ContainerWidget.tsx

@@ -1,29 +1,27 @@
-import QuizAnswerer from "@/components/QuizAnswerer";
+import { ComponentPropsWithoutRef } from "react";
 import { Root, createRoot } from "react-dom/client";
 import { pollForSelector } from "../shared/pollForSelector";
+import QuizContainer from "./QuizContainer";
 
 
+type Props = ComponentPropsWithoutRef<typeof QuizContainer>;
+
 export class ContainerWidget {
     root: Root | undefined;
 
-    constructor({ selector, quizId, selectorPollingTimeLimit = 60 }: {
+    constructor(props: Props & {
-        quizId: string;
         selector: string;
         /**
          * In seconds, null - polling disabled
          */
         selectorPollingTimeLimit?: number | null;
     }) {
+        const { selector, selectorPollingTimeLimit = 60 } = props;
+
         const element = document.querySelector(selector);
         if (element) {
             this.root = createRoot(element);
-            this.root.render(
+            this.render(props);
-                <QuizAnswerer
-                    quizId={quizId}
-                    changeFaviconAndTitle={false}
-                    disableGlobalCss
-                />
-            );
 
             return;
         }
@@ -35,16 +33,14 @@ export class ContainerWidget {
 
         pollForSelector(selector, selectorPollingTimeLimit, (element) => {
             this.root = createRoot(element);
-            this.root.render(
+            this.render(props);
-                <QuizAnswerer
-                    quizId={quizId}
-                    changeFaviconAndTitle={false}
-                    disableGlobalCss
-                />
-            );
         });
     }
 
+    render(props: Props) {
+        this.root?.render(<QuizContainer {...props} />);
+    }
+
     destroy() {
         if (this.root) this.root.unmount();
     }

src/widgets/container/QuizContainer.tsx

@@ -0,0 +1,35 @@
+import QuizAnswerer from "@/components/QuizAnswerer";
+import { Box, useMediaQuery } from "@mui/material";
+import { ComponentPropsWithoutRef } from "react";
+import OpenQuizButton from "../button/OpenQuizButton";
+
+
+type Props = ComponentPropsWithoutRef<typeof OpenQuizButton> & {
+    quizId: string;
+    showButtonOnMobile?: boolean;
+    dimensions?: { width: string; height: string; };
+};
+
+export default function QuizContainer(props: Props) {
+    const { quizId, dimensions, showButtonOnMobile = false } = props;
+    const isMobile = useMediaQuery("(max-width: 600px)");
+
+    return showButtonOnMobile && isMobile ? (
+        <OpenQuizButton {...props} />
+    ) : (
+        <Box
+            sx={{
+                width: dimensions?.width ?? "100%",
+                maxWidth: "100%",
+                height: dimensions?.height ?? "100%",
+                maxHeight: "100%",
+            }}
+        >
+            <QuizAnswerer
+                quizId={quizId}
+                changeFaviconAndTitle={false}
+                disableGlobalCss
+            />
+        </Box>
+    );
+}