Use modal instead of inbuilt fullscreen

Author: jdevdevdev

src/app/bigtextconfig/FullscreenModalComponent.module.css

@@ -0,0 +1,19 @@
+.fullscreen-horizontal {
+  writing-mode: sideways-rl;
+  text-orientation: mixed;
+  word-wrap: break-word;
+}
+.fullscreen {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  width: 100vw;
+  margin: 0;
+  position: fixed;
+}
+.hidden {
+  display: none;
+  opacity: 0;
+}
+

src/app/bigtextconfig/FullscreenModalComponent.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import styles from "./FullscreenModalComponent.module.css";
+type Props = {
+  orientation?: "vertical" | "horizontal",
+  isFullscreenValue: boolean,
+}
+export const FullscreenModalComponent: React.FC<React.PropsWithChildren<Props>> = ({
+  orientation = "vertical",
+  isFullscreenValue = false,
+  children
+}) => {
+  return (
+    <div
+      className={
+        [
+          orientation == "horizontal" && styles["fullscreen-horizontal"],
+          !isFullscreenValue && styles.hidden,
+          styles.fullscreen
+        ].join(" ")
+      }
+    >
+      {isFullscreenValue && children}
+    </div>
+  );
+};

src/app/bigtextconfig/page.tsx

@@ -5,7 +5,7 @@ import { LargeTextInputComponent } from "./LargeTextInputComponent";
 import { LargeButtonComponent } from "./LargeButtonComponent";
 import { LargeTextDisplayComponent } from "@/components/shared/LargeTextDisplayComponent";
 import { QrComponent } from "./QrComponent";
-import { FullscreenComponent } from "./FullscreenComponent";
+import { FullscreenModalComponent } from "./FullscreenModalComponent";
 import styles from "./page.module.css";
 export default function Page() {
   const [text, setText] = useState("");
@@ -56,9 +56,8 @@ export default function Page() {
         </div>
       </div>
     </div>
-    <FullscreenComponent
+    <FullscreenModalComponent
       isFullscreenValue={isFullscreen}
-      updateFullscreenState={setFullscreen}
       orientation={orientation}
     >
       {fullscreenContent === "text" ?
@@ -86,6 +85,6 @@ export default function Page() {
           <Image src="/cross.svg" alt="close" width={100} height={100} />
         </LargeButtonComponent>
       </div>
-    </FullscreenComponent>
+    </FullscreenModalComponent>
   </div>);
 };