Display a warning on mobile devices

Author: fulopkovacs

src/components/HomeIntro.tsx

@@ -63,9 +63,11 @@ function WavyLine() {
 export function HomeIntro({
   activeStep,
   showIntro,
+  isMobile = false,
 }: {
   activeStep: string | null;
   showIntro: boolean;
+  isMobile?: boolean;
 }) {
   const [open, setOpen] = useState(
     activeStep === null ||
@@ -143,11 +145,18 @@ export function HomeIntro({
                 Sounds amazing, right? Learn the basics with this interactive
                 tutorial in 6-7 minutes!
               </p>
+              {isMobile && (
+                <p className="max-w-sm text-destructive text-center font-bold text-sm">
+                  This interactive tutorial requires features not available on
+                  mobile browsers. Please visit on a desktop computer.
+                </p>
+              )}
             </CardContent>
             <CardFooter className="flex justify-center items-center flex-col gap-10">
               <Button
                 onClick={startTutorial}
                 className="bg-primary cursor-pointer"
+                disabled={isMobile}
               >
                 Get started <ArrowRightIcon />
               </Button>

src/routeTree.gen.ts

@@ -9,6 +9,7 @@
 // Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
 
 import { Route as rootRouteImport } from './routes/__root'
+import { Route as MobileRouteImport } from './routes/mobile'
 import { Route as TutorialRouteImport } from './routes/_tutorial'
 import { Route as IndexRouteImport } from './routes/index'
 import { Route as TutorialDbRouteImport } from './routes/_tutorial._db'
@@ -17,6 +18,11 @@ import { Route as TutorialDbProjectRootRouteImport } from './routes/_tutorial._d
 import { Route as TutorialDbProjectsIndexRouteImport } from './routes/_tutorial._db.projects.index'
 import { Route as TutorialDbProjectsProjectIdRouteImport } from './routes/_tutorial._db.projects.$projectId'
 
+const MobileRoute = MobileRouteImport.update({
+  id: '/mobile',
+  path: '/mobile',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const TutorialRoute = TutorialRouteImport.update({
   id: '/_tutorial',
   getParentRoute: () => rootRouteImport,
@@ -54,13 +60,15 @@ const TutorialDbProjectsProjectIdRoute =
 
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
+  '/mobile': typeof MobileRoute
   '/project-root': typeof TutorialDbProjectRootRoute
   '/projects': typeof TutorialDbProjectsRouteWithChildren
   '/projects/$projectId': typeof TutorialDbProjectsProjectIdRoute
   '/projects/': typeof TutorialDbProjectsIndexRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
+  '/mobile': typeof MobileRoute
   '/project-root': typeof TutorialDbProjectRootRoute
   '/projects/$projectId': typeof TutorialDbProjectsProjectIdRoute
   '/projects': typeof TutorialDbProjectsIndexRoute
@@ -69,6 +77,7 @@ export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/': typeof IndexRoute
   '/_tutorial': typeof TutorialRouteWithChildren
+  '/mobile': typeof MobileRoute
   '/_tutorial/_db': typeof TutorialDbRouteWithChildren
   '/_tutorial/_db/project-root': typeof TutorialDbProjectRootRoute
   '/_tutorial/_db/projects': typeof TutorialDbProjectsRouteWithChildren
@@ -79,16 +88,18 @@ export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
   fullPaths:
     | '/'
+    | '/mobile'
     | '/project-root'
     | '/projects'
     | '/projects/$projectId'
     | '/projects/'
   fileRoutesByTo: FileRoutesByTo
-  to: '/' | '/project-root' | '/projects/$projectId' | '/projects'
+  to: '/' | '/mobile' | '/project-root' | '/projects/$projectId' | '/projects'
   id:
     | '__root__'
     | '/'
     | '/_tutorial'
+    | '/mobile'
     | '/_tutorial/_db'
     | '/_tutorial/_db/project-root'
     | '/_tutorial/_db/projects'
@@ -99,10 +110,18 @@ export interface FileRouteTypes {
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
   TutorialRoute: typeof TutorialRouteWithChildren
+  MobileRoute: typeof MobileRoute
 }
 
 declare module '@tanstack/react-router' {
   interface FileRoutesByPath {
+    '/mobile': {
+      id: '/mobile'
+      path: '/mobile'
+      fullPath: '/mobile'
+      preLoaderRoute: typeof MobileRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/_tutorial': {
       id: '/_tutorial'
       path: ''
@@ -197,6 +216,7 @@ const TutorialRouteWithChildren = TutorialRoute._addFileChildren(
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
   TutorialRoute: TutorialRouteWithChildren,
+  MobileRoute: MobileRoute,
 }
 export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)

src/routes/index.tsx

@@ -1,7 +1,24 @@
 import { createFileRoute, redirect } from "@tanstack/react-router";
+import { createServerFn } from "@tanstack/react-start";
+import { getRequestHeader } from "@tanstack/react-start/server";
+
+const getIsMobile = createServerFn().handler(async () => {
+  const userAgent = getRequestHeader("user-agent") || "";
+  const mobileRegex =
+    /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i;
+  return mobileRegex.test(userAgent);
+});
 
 export const Route = createFileRoute("/")({
   beforeLoad: async () => {
+    const isMobile = await getIsMobile();
+
+    if (isMobile) {
+      throw redirect({
+        to: "/mobile",
+      });
+    }
+
     throw redirect({
       to: "/projects",
     });

src/routes/mobile.tsx

@@ -0,0 +1,14 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { HomeIntro } from "@/components/HomeIntro";
+
+export const Route = createFileRoute("/mobile")({
+  component: RouteComponent,
+});
+
+function RouteComponent() {
+  return (
+    <div className="min-h-screen bg-background">
+      <HomeIntro activeStep={null} showIntro={true} isMobile={true} />
+    </div>
+  );
+}