diff options
| -rw-r--r-- | apps/web/src/app/editor/[project_id]/page.tsx | 21 | ||||
| -rw-r--r-- | apps/web/src/components/editor/mobile-gate.tsx | 74 |
2 files changed, 86 insertions, 9 deletions
diff --git a/apps/web/src/app/editor/[project_id]/page.tsx b/apps/web/src/app/editor/[project_id]/page.tsx index 987af7c6..3ec6ddb8 100644 --- a/apps/web/src/app/editor/[project_id]/page.tsx +++ b/apps/web/src/app/editor/[project_id]/page.tsx @@ -16,22 +16,25 @@ import { Onboarding } from "@/components/editor/onboarding"; import { MigrationDialog } from "@/components/editor/dialogs/migration-dialog"; import { usePanelStore } from "@/stores/panel-store"; import { usePasteMedia } from "@/hooks/use-paste-media"; +import { MobileGate } from "@/components/editor/mobile-gate"; export default function Editor() { const params = useParams(); const projectId = params.project_id as string; return ( - <EditorProvider projectId={projectId}> - <div className="bg-background flex h-screen w-screen flex-col overflow-hidden"> - <EditorHeader /> - <div className="min-h-0 min-w-0 flex-1"> - <EditorLayout /> + <MobileGate> + <EditorProvider projectId={projectId}> + <div className="bg-background flex h-screen w-screen flex-col overflow-hidden"> + <EditorHeader /> + <div className="min-h-0 min-w-0 flex-1"> + <EditorLayout /> + </div> + <Onboarding /> + <MigrationDialog /> </div> - <Onboarding /> - <MigrationDialog /> - </div> - </EditorProvider> + </EditorProvider> + </MobileGate> ); } diff --git a/apps/web/src/components/editor/mobile-gate.tsx b/apps/web/src/components/editor/mobile-gate.tsx new file mode 100644 index 00000000..685ce178 --- /dev/null +++ b/apps/web/src/components/editor/mobile-gate.tsx @@ -0,0 +1,74 @@ +"use client"; + +import { useEffect, useState } from "react"; +import Link from "next/link"; +import { Button } from "../ui/button"; +import { HugeiconsIcon } from "@hugeicons/react"; +import { ArrowLeft01Icon, ArrowRight01Icon } from "@hugeicons/core-free-icons"; +import { useRouter } from "next/navigation"; + +const STORAGE_KEY = "mobile-acknowledged"; + +interface MobileGateProps { + children: React.ReactNode; +} + +export function MobileGate({ children }: MobileGateProps) { + const router = useRouter(); + const [show, setShow] = useState<boolean | null>(null); + + useEffect(() => { + const isMobile = window.innerWidth < 1024; + const acknowledged = localStorage.getItem(STORAGE_KEY) === "true"; + setShow(isMobile && !acknowledged); + }, []); + + if (show === null) return null; + if (!show) return <>{children}</>; + + const handleContinue = () => { + localStorage.setItem(STORAGE_KEY, "true"); + setShow(false); + }; + + const handleGoBack = () => { + router.back(); + }; + + return ( + <div className="dark bg-background relative flex h-screen w-screen flex-col overflow-hidden"> + <Button + variant="text" + className="absolute top-6 left-6 flex items-center gap-1 text-muted-foreground" + onClick={handleGoBack} + > + <HugeiconsIcon icon={ArrowLeft01Icon} className="size-4" /> + <span className=" text-sm">Go back</span> + </Button> + + <div className="flex flex-1 flex-col justify-center gap-5 px-7"> + <div className="flex flex-col gap-3"> + <h1 className="text-foreground text-3xl font-bold tracking-tight"> + Desktop only (for now) + </h1> + <p className="text-muted-foreground text-sm leading-relaxed"> + OpenCut isn't optimized for mobile or iPad yet. Things will break + and the layout will be a mess. Come back on a desktop for the real + experience. + </p> + </div> + <div className="flex items-center gap-3"> + <Button variant="foreground" onClick={handleContinue}> + Take a look anyway + </Button> + <Button variant="ghost" asChild> + <Link href="/roadmap" className="flex items-center gap-1"> + Roadmap + <HugeiconsIcon icon={ArrowRight01Icon} size={14} /> + </Link> + </Button> + </div> + </div> + </div> + ); +} |