feat: maintaince mode for mobile devices

withspek · Sep 5, 2024 · ea92ea2 · ea92ea2
1 parent 40e7113
commit ea92ea2
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 7 deletions.
diff --git a/api/.env.example b/api/.env.example
@@ -3,4 +3,8 @@ GITLAB_APP_SECRET=
 GITLAB_REDIRECT_URI=
 GITHUB_CLIENT_ID=
 GITHUB_CLIENT_SECRET=
-GITHUB_REDIRECT_URI=
+GITHUB_REDIRECT_URI=
+WEB_APP_URL=
+API_URL=
+PORT=
+RABBITMQ_URL=
diff --git a/api/deploy.sh b/api/deploy.sh
diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
@@ -3,6 +3,7 @@ import type { Metadata } from "next";
 import "./globals.css";
 import { Providers } from "./providers";
 import { ProgressBar } from "@/components/ProgressBar";
+import { MaintainceMode } from "@/components/MaintainceMode";
 
 export const metadata: Metadata = {
   metadataBase: new URL("https://withspek.netlify.app"),
@@ -24,6 +25,7 @@ export default function RootLayout({
     <html lang="en">
       <body>
         <div id="__app">
+          <MaintainceMode />
           <ProgressBar />
           <Providers>{children}</Providers>
         </div>

diff --git a/apps/web/src/components/MaintainceMode.tsx b/apps/web/src/components/MaintainceMode.tsx
@@ -0,0 +1,19 @@
+import { useMediaQuery } from "@spek/ui";
+
+export const MaintainceMode: React.FC = () => {
+  const { isMobile } = useMediaQuery();
+
+  return (
+    <>
+      {isMobile && (
+        <div className="absolute w-full h-full flex flex-col justify-center items-center bg-primary-800 z-50">
+          <p className="text-3xl">😓😓</p>
+          <p className="text-xl text-center px-3">
+            The mobile version of spek is still underdevelopment but you can use
+            a Laptop...
+          </p>
+        </div>
+      )}
+    </>
+  );
+};