feat: mobile warning

Author: vincent-qc

src/components/landing/mobile.tsx

@@ -0,0 +1,17 @@
+import { usePageStore } from "../../stores/page.store";
+
+export default function MobileWarning() {
+  return (
+    <div className="flex flex-row items-center justify-center gap-2 bg-red-500 p-2 text-center text-white">
+      <p>This page is best viewed on Desktop</p>
+      <button
+        onClick={() => {
+          usePageStore.setState({ showWarning: false });
+        }}
+        className="border-[1px] border-white px-1 text-sm font-semibold transition-colors hover:bg-white hover:text-red-500"
+      >
+        ok
+      </button>
+    </div>
+  );
+}

src/components/landing/page.tsx

@@ -5,6 +5,7 @@ import Scene from "../../scenes/scene";
 
 import { useMediaQuery } from "usehooks-ts";
 import { PageStore, usePageStore } from "../../stores/page.store";
+import MobileWarning from "./mobile";
 import Namecard from "./namecard";
 import Navbar from "./navbar";
 import { pages } from "./navpages";
@@ -14,9 +15,10 @@ export default function LandingPage() {
   const [showPages, setShowPages] = useState(false);
   const [showScene, setShowScene] = useState(false);
 
-  const { page } = usePageStore(
+  const { page, showWarning } = usePageStore(
     useShallow((state: PageStore) => ({
       page: state.page,
+      showWarning: state.showWarning,
     })),
   );
 
@@ -30,28 +32,31 @@ export default function LandingPage() {
   });
 
   return (
-    <div className="flex h-screen w-screen flex-row font-poppins text-white">
-      {!isMobile && (
-        <div
+    <div className="flex h-screen w-screen flex-col font-poppins text-white">
+      {isMobile && showWarning && <MobileWarning />}
+      <div className="flex h-full w-full flex-row">
+        {!isMobile && (
+          <div
+            style={{
+              width: "50%",
+            }}
+          >
+            {showScene && <Scene />}
+          </div>
+        )}
+        <motion.div
           style={{
-            width: "50%",
+            width: isMobile ? "100%" : "50%",
           }}
+          className="flex flex-col gap-4 py-20 pl-10 pr-20"
         >
-          {showScene && <Scene />}
-        </div>
-      )}
-      <motion.div
-        style={{
-          width: isMobile ? "100%" : "50%",
-        }}
-        className="flex flex-col gap-4 py-20 pl-10 pr-20"
-      >
-        <div className="flex flex-col items-end justify-center">
-          <Namecard />
-          <Navbar />
-        </div>
-        {showPages && pages.find((item) => item.page === page)?.component}
-      </motion.div>
+          <div className="flex flex-col items-end justify-center">
+            <Namecard />
+            <Navbar />
+          </div>
+          {showPages && pages.find((item) => item.page === page)?.component}
+        </motion.div>
+      </div>
     </div>
   );
 }

src/stores/page.store.ts

@@ -10,11 +10,14 @@ enum Page {
 
 type PageStore = {
   page: Page;
+  showWarning: boolean;
 };
 
 const usePageStore = create<PageStore>(() => ({
   page: Page.ABOUT,
+  showWarning: true,
 }));
 
 export { Page, usePageStore };
 export type { PageStore };
+