Add qr and big text.

Author: jdevdevdev

eslint.config.mjs

@@ -1,6 +1,8 @@
 import { dirname } from "path";
 import { fileURLToPath } from "url";
 import { FlatCompat } from "@eslint/eslintrc";
+import stylisticTs from "@stylistic/eslint-plugin-ts";
+import stylisticJsx from "@stylistic/eslint-plugin-jsx";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
@@ -11,6 +13,18 @@ const compat = new FlatCompat({
 
 const eslintConfig = [
   ...compat.extends("next/core-web-vitals", "next/typescript"),
+  {
+    plugins: {
+      "@stylistic/ts": stylisticTs,
+      "@stylistic/jsx": stylisticJsx
+    },
+    rules: {
+      semi: ["warn", "always"],
+      "@stylistic/ts/indent": ["error", 2],
+      "@stylistic/jsx/jsx-indent": ["error", 2],
+      "@stylistic/ts/quotes": ["error", "double", { "avoidEscape": true }]
+    },
+  },
 ];
 
 export default eslintConfig;

package.json

@@ -13,18 +13,22 @@
     "lodash": "^4.17.21",
     "next": "15.1.2",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "uqr": "^0.1.2"
   },
   "devDependencies": {
-    "@eslint/eslintrc": "^3.2.0",
+    "@eslint/eslintrc": "^3.3.1",
+    "@stylistic/eslint-plugin-js": "^4.2.0",
+    "@stylistic/eslint-plugin-jsx": "^4.2.0",
+    "@stylistic/eslint-plugin-ts": "^4.2.0",
     "@types/brotli": "^1.3.4",
-    "@types/node": "^20.17.17",
-    "@types/react": "^19.0.8",
-    "@types/react-dom": "^19.0.3",
+    "@types/node": "^22.13.11",
+    "@types/react": "^19.0.12",
+    "@types/react-dom": "^19.0.4",
     "brotli": "^1.3.3",
-    "eslint": "^9.20.0",
+    "eslint": "^9.23.0",
     "eslint-config-next": "15.1.2",
-    "typescript": "^5.7.3",
+    "typescript": "^5.8.2",
     "vitest": "^2.1.9"
   }
 }

pnpm-lock.yaml

@@ -0,0 +1,18 @@
+.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;
+}
+.hidden {
+  display: none;
+  opacity: 0;
+}
+

public/fullscreen.svg

@@ -0,0 +1,53 @@
+import React, { useEffect, useRef } from "react";
+import { useFullscreen } from "@/hooks/useFullscreen";
+import styles from "./FullscreenComponent.module.css";
+type Props = {
+  orientation?: "vertical" | "horizontal",
+  isFullscreenValue: boolean,
+  updateFullscreenState: (param: boolean) => void
+}
+export const FullscreenComponent: React.FC<React.PropsWithChildren<Props>> = ({
+  orientation = "vertical",
+  isFullscreenValue = false,
+  updateFullscreenState,
+  children
+}) => {
+  const isInitialMount = useRef(true);
+  const { fullscreenRef, isFullscreen: internalIsFullscreen, enterFullscreen, exitFullscreen } = useFullscreen();
+
+  useEffect(() => {
+    if (isInitialMount.current) {
+      return;
+    }
+    if (isFullscreenValue) {
+      enterFullscreen();
+    } else {
+      exitFullscreen();
+    }
+  }, [isFullscreenValue, enterFullscreen, exitFullscreen]);
+
+  useEffect(() => {
+    if (isInitialMount.current) {
+      return;
+    }
+    updateFullscreenState(internalIsFullscreen);
+  }, [internalIsFullscreen, updateFullscreenState]);
+
+  useEffect(() => {
+    isInitialMount.current = false;
+  }, []);
+  return (
+    <div
+      className={
+        [
+          orientation == "horizontal" && styles["fullscreen-horizontal"],
+          !internalIsFullscreen && styles.hidden,
+          styles.fullscreen
+        ].join(" ")
+      }
+      ref={fullscreenRef}
+    >
+      {internalIsFullscreen && children}
+    </div>
+  );
+};