feat: mobile notice

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;

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 />