From 5d8b073a1e3dc8eb6bf7219ca1c7e78df8bfa202 Mon Sep 17 00:00:00 2001
From: trafficlunar <hello@trafficlunar.net>
Date: Mon, 3 Feb 2025 21:18:55 +0000
Subject: [PATCH] feat: mobile notice

---
 src/components/MobileNotice.tsx | 34 +++++++++++++++++++++++++++++++++
 src/pages/AppPage.tsx           |  3 +++
 2 files changed, 37 insertions(+)
 create mode 100644 src/components/MobileNotice.tsx

diff --git a/src/components/MobileNotice.tsx b/src/components/MobileNotice.tsx
new file mode 100644
index 0000000..c631d13
--- /dev/null
+++ b/src/components/MobileNotice.tsx
@@ -0,0 +1,34 @@
+import { useEffect, useState } from "react";
+import { SmartphoneIcon } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+
+function MobileNotice() {
+	const [isOpen, setIsOpen] = useState(false);
+
+	useEffect(() => {
+		setIsOpen(window.innerWidth <= 600);
+	}, []);
+
+	return (
+		<Dialog open={isOpen} onOpenChange={(open) => setIsOpen(open)}>
+			<DialogContent className="w-96 rounded-lg">
+				<DialogHeader className="flex items-center">
+					<SmartphoneIcon size={64} className="mb-2" />
+
+					<DialogTitle>Phone Detected</DialogTitle>
+					<DialogDescription>Using a phone with Blockmatic is not supported as of right now. Proceed with caution.</DialogDescription>
+				</DialogHeader>
+
+				<DialogFooter>
+					<DialogClose>
+						<Button type="button">Close</Button>
+					</DialogClose>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
+	);
+}
+
+export default MobileNotice;
diff --git a/src/pages/AppPage.tsx b/src/pages/AppPage.tsx
index a897066..cb8a0f8 100644
--- a/src/pages/AppPage.tsx
+++ b/src/pages/AppPage.tsx
@@ -5,6 +5,7 @@ import { SettingsProvider } from "@/context/Settings";
 import { TexturesProvider } from "@/context/Textures";
 import { ToolProvider } from "@/context/Tool";
 
+import MobileNotice from "@/components/MobileNotice";
 import Menubar from "@/components/menubar";
 import Toolbar from "@/components/toolbar";
 import Canvas from "@/components/canvas/Canvas";
@@ -18,6 +19,8 @@ function AppPage() {
 					<SettingsProvider>
 						<TexturesProvider>
 							<ToolProvider>
+								<MobileNotice />
+
 								<main className="overflow-y-hidden h-screen grid grid-rows-[2.5rem_minmax(0,1fr)] grid-cols-[2.5rem_minmax(0,1fr)_auto]">
 									<Menubar />
 									<Toolbar />