diff options
| author | Maze Winther <mazewinther@gmail.com> | 2026-03-27 00:55:15 +0100 |
|---|---|---|
| committer | Maze Winther <mazewinther@gmail.com> | 2026-03-29 15:56:48 +0200 |
| commit | 4d127a038bf768eded68aae3cfa5c1b12241bdac (patch) | |
| tree | 16bbb801caf6770546cff4fdb37b6408ec9ead98 /apps/web/src/components/editor/mobile-gate.tsx | |
| parent | 82817cb50cb0487350573d6129130aec705f924b (diff) | |
| download | opencut-4d127a038bf768eded68aae3cfa5c1b12241bdac.tar.gz | |
chore: normalize line endings
Diffstat (limited to 'apps/web/src/components/editor/mobile-gate.tsx')
| -rw-r--r-- | apps/web/src/components/editor/mobile-gate.tsx | 144 |
1 files changed, 72 insertions, 72 deletions
diff --git a/apps/web/src/components/editor/mobile-gate.tsx b/apps/web/src/components/editor/mobile-gate.tsx index 6483e438..3dde2fa7 100644 --- a/apps/web/src/components/editor/mobile-gate.tsx +++ b/apps/web/src/components/editor/mobile-gate.tsx @@ -1,72 +1,72 @@ -"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="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 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> - ); -} +"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="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 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>
+ );
+}
|