Merge pull request #13 from tylersayshi/mobile

mobile

packages/site/src/components/Header.tsx

···
 			}}
 		>
 			<div style={{ maxWidth: "1400px", margin: "0 auto" }}>
-				<div
-					style={{
-						display: "flex",
-						justifyContent: "space-between",
-						alignItems: "flex-start",
-					}}
-				>
+				<div className="header-content">
 					<div>
 						<h1
 							style={{
···
 							Type-safe lexicon inference for ATProto schemas
 						</p>
 					</div>
-					<div
-						style={{ display: "flex", gap: "1.25rem", paddingTop: "0.5rem" }}
-					>
+					<div className="header-links">
 						<a
 							href="https://github.com/tylersayshi/prototypey"
 							target="_blank"

packages/site/src/components/Playground.tsx

···
 import type * as Monaco from "monaco-editor";
 import { parseAsString, useQueryState } from "nuqs";
 import LZString from "lz-string";
+import MonacoEditor from "@monaco-editor/react";
 
 let tsWorkerInstance: Monaco.languages.typescript.TypeScriptWorker | null =
 	null;
···
 	}, [code, monaco]);
 
 	return (
-		<div
-			style={{
-				flex: 1,
-				display: "flex",
-				overflow: "hidden",
-			}}
-		>
+		<>
+			{/* Desktop playground */}
 			<div
+				className="desktop-only"
 				style={{
 					flex: 1,
-					display: "flex",
-					borderRight: "1px solid #e5e7eb",
+					overflow: "hidden",
 				}}
 			>
-				<Editor
-					value={code}
-					onChange={handleCodeChange}
-					onReady={handleEditorReady}
-				/>
+				<div
+					style={{
+						flex: 1,
+						display: "flex",
+						borderRight: "1px solid #e5e7eb",
+					}}
+				>
+					<Editor
+						value={code}
+						onChange={handleCodeChange}
+						onReady={handleEditorReady}
+					/>
+				</div>
+				<div style={{ flex: 1, display: "flex" }}>
+					<OutputPanel output={output} />
+				</div>
 			</div>
-			<div style={{ flex: 1, display: "flex" }}>
-				<OutputPanel output={output} />
+
+			{/* Mobile static demo */}
+			<div
+				className="mobile-only"
+				style={{
+					flex: 1,
+					flexDirection: "column",
+					overflow: "auto",
+					padding: "1rem",
+				}}
+			>
+				<div
+					style={{
+						backgroundColor: "#f9fafb",
+						padding: "1rem",
+						borderRadius: "0.5rem",
+						marginBottom: "1rem",
+						textAlign: "center",
+						color: "#6b7280",
+						fontSize: "0.875rem",
+					}}
+				>
+					Playground available on desktop
+				</div>
+
+				<MobileStaticDemo code={code} json={output.json} />
 			</div>
-		</div>
+		</>
 	);
 }
 
···
 	}
 
 	return indentedLines.join("\n");
+}
+
+function MobileStaticDemo({ code, json }: { code: string; json: string }) {
+	// Calculate line counts to size editors appropriately
+	const codeLines = code.split("\n").length;
+	const jsonLines = json.split("\n").length;
+
+	const estimateWrappedLines = (text: string, maxCharsPerLine: number) => {
+		return text.split("\n").reduce((total, line) => {
+			const wrappedLines = Math.ceil(
+				Math.max(1, line.length) / maxCharsPerLine,
+			);
+			return total + wrappedLines;
+		}, 0);
+	};
+
+	const codeWrappedLines = estimateWrappedLines(code, 50);
+	const jsonWrappedLines = estimateWrappedLines(json, 50);
+
+	return (
+		<div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
+			{/* You write section */}
+			<div style={{ display: "flex", flexDirection: "column" }}>
+				<div
+					style={{
+						padding: "0.75rem 1rem",
+						backgroundColor: "#f9fafb",
+						borderBottom: "1px solid #e5e7eb",
+						fontSize: "0.875rem",
+						fontWeight: "600",
+						color: "#374151",
+						borderTopLeftRadius: "0.5rem",
+						borderTopRightRadius: "0.5rem",
+					}}
+				>
+					You write
+				</div>
+				<div
+					style={{
+						border: "1px solid #e5e7eb",
+						borderTop: "none",
+						borderBottomLeftRadius: "0.5rem",
+						borderBottomRightRadius: "0.5rem",
+						overflow: "hidden",
+					}}
+				>
+					<MonacoEditor
+						height={`${codeWrappedLines * 18 + 32}px`}
+						defaultLanguage="typescript"
+						value={code}
+						theme="vs-light"
+						options={{
+							readOnly: true,
+							minimap: { enabled: false },
+							fontSize: 12,
+							lineNumbers: "on",
+							renderLineHighlight: "none",
+							scrollBeyondLastLine: false,
+							padding: { top: 16, bottom: 16 },
+							scrollbar: {
+								vertical: "hidden",
+								horizontal: "hidden",
+								verticalScrollbarSize: 0,
+								horizontalScrollbarSize: 0,
+								handleMouseWheel: false,
+							},
+							wordWrap: "on",
+							overviewRulerLanes: 0,
+						}}
+					/>
+				</div>
+			</div>
+
+			{/* JSON generated section */}
+			<div style={{ display: "flex", flexDirection: "column" }}>
+				<div
+					style={{
+						padding: "0.75rem 1rem",
+						backgroundColor: "#f9fafb",
+						borderBottom: "1px solid #e5e7eb",
+						fontSize: "0.875rem",
+						fontWeight: "600",
+						color: "#374151",
+						borderTopLeftRadius: "0.5rem",
+						borderTopRightRadius: "0.5rem",
+					}}
+				>
+					JSON generated
+				</div>
+				<div
+					style={{
+						border: "1px solid #e5e7eb",
+						borderTop: "none",
+						borderBottomLeftRadius: "0.5rem",
+						borderBottomRightRadius: "0.5rem",
+						overflow: "hidden",
+					}}
+				>
+					<MonacoEditor
+						height={`${jsonWrappedLines * 18 + 32}px`}
+						defaultLanguage="json"
+						value={json}
+						theme="vs-light"
+						options={{
+							readOnly: true,
+							minimap: { enabled: false },
+							fontSize: 12,
+							lineNumbers: "on",
+							renderLineHighlight: "none",
+							scrollBeyondLastLine: false,
+							padding: { top: 16, bottom: 16 },
+							scrollbar: {
+								vertical: "hidden",
+								horizontal: "hidden",
+								verticalScrollbarSize: 0,
+								horizontalScrollbarSize: 0,
+								handleMouseWheel: false,
+							},
+							wordWrap: "on",
+							overviewRulerLanes: 0,
+						}}
+					/>
+				</div>
+			</div>
+		</div>
+	);
 }
 
 const DEFAULT_CODE = `import { lx, type Infer } from "prototypey";

packages/site/src/index.css

···
 	display: flex;
 	flex-direction: column;
 }
+
+/* Desktop layout - default */
+.header-content {
+	display: flex;
+	justify-content: space-between;
+	align-items: flex-start;
+}
+
+.header-links {
+	display: flex;
+	gap: 1.25rem;
+	padding-top: 0.5rem;
+}
+
+.mobile-only {
+	display: none;
+}
+
+.desktop-only {
+	display: flex;
+}
+
+/* Mobile layout */
+@media (max-width: 768px) {
+	.header-content {
+		flex-direction: column;
+		gap: 1rem;
+	}
+
+	.header-links {
+		padding-top: 0;
+		width: 100%;
+		justify-content: flex-start;
+	}
+
+	.mobile-only {
+		display: flex !important;
+		flex-direction: column;
+	}
+
+	.desktop-only {
+		display: none !important;
+	}
+}