From 04718b03393d85699ce3acc391f77a5c9d98d97e Mon Sep 17 00:00:00 2001
From: "Builder.io" <builder-bot@builder.io>
Date: Wed, 17 Sep 2025 09:39:45 +0000
Subject: [PATCH] Add switch.html page emission in webpack and route constant

cgen-0bd2d6e452e84da9bf9e8baed4cd6f39
---
 website/src/website/components/Nav.tsx        |  2 +-
 website/src/website/pages/App.tsx             |  5 +-
 website/src/website/pages/routes.ts           |  1 +
 .../src/website/pages/switch/SwitchPage.tsx   | 47 +++++++++++++++++++
 website/webpack.config.ts                     |  5 ++
 5 files changed, 58 insertions(+), 2 deletions(-)
 create mode 100644 website/src/website/pages/switch/SwitchPage.tsx

diff --git a/website/src/website/components/Nav.tsx b/website/src/website/components/Nav.tsx
index 7cc6c069..70d3fd0e 100644
--- a/website/src/website/components/Nav.tsx
+++ b/website/src/website/components/Nav.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { home, playground, docs, monarch } from "../pages/routes";
+import { home, playground, docs, monarch, switchRoute } from "../pages/routes";
 import { Container, Navbar, Nav, NavDropdown } from "./bootstrap";
 
 export class PageNav extends React.Component {
diff --git a/website/src/website/pages/App.tsx b/website/src/website/pages/App.tsx
index e3e15672..a62994d7 100644
--- a/website/src/website/pages/App.tsx
+++ b/website/src/website/pages/App.tsx
@@ -1,9 +1,10 @@
 import { Home } from "./home/Home";
 import { PlaygroundPage } from "./playground/PlaygroundPage";
-import { docs, home, monarch, playground } from "./routes";
+import { docs, home, monarch, playground, switchRoute } from "./routes";
 import * as React from "react";
 import { DocsPage } from "./DocsPage";
 import { MonarchPage } from "./MonarchPage";
+import { SwitchPage } from "./switch/SwitchPage";
 
 export class App extends React.Component {
 	render() {
@@ -15,6 +16,8 @@ export class App extends React.Component {
 			return <DocsPage />;
 		} else if (monarch.isActive) {
 			return <MonarchPage />;
+		} else if (switchRoute.isActive) {
+			return <SwitchPage />;
 		}
 		return <>Page does not exist</>;
 	}
diff --git a/website/src/website/pages/routes.ts b/website/src/website/pages/routes.ts
index b659ad09..6b010741 100644
--- a/website/src/website/pages/routes.ts
+++ b/website/src/website/pages/routes.ts
@@ -26,3 +26,4 @@ export const home = new Route("./");
 export const playground = new Route("./playground.html");
 export const docs = new Route("./docs.html");
 export const monarch = new Route("./monarch.html");
+export const switchRoute = new Route("./switch.html");
diff --git a/website/src/website/pages/switch/SwitchPage.tsx b/website/src/website/pages/switch/SwitchPage.tsx
new file mode 100644
index 00000000..8a00d23e
--- /dev/null
+++ b/website/src/website/pages/switch/SwitchPage.tsx
@@ -0,0 +1,47 @@
+import * as React from "react";
+import { ControlledMonacoEditor } from "../../components/monaco/MonacoEditor";
+
+export function SwitchPage() {
+  const [value, setValue] = React.useState<string>(`// Welcome to SWITCH\n// Start coding, create repos and manage issues here.\n`);
+  return (
+    <div className="switch-shell">
+      <div className="switch-activity-bar" aria-label="Activity Bar">
+        <button className="switch-activity-item" title="Explorer" aria-label="Explorer">📁</button>
+        <button className="switch-activity-item" title="Search" aria-label="Search">🔎</button>
+        <button className="switch-activity-item" title="Source Control" aria-label="Source Control">🔀</button>
+        <button className="switch-activity-item" title="Issues" aria-label="Issues">🏷️</button>
+      </div>
+      <div className="switch-main">
+        <aside className="switch-sidebar" aria-label="Sidebar">
+          <div className="switch-pane">
+            <div className="switch-pane-header">Explorer</div>
+            <div className="switch-pane-body">
+              <button className="switch-secondary-btn">Open Folder</button>
+              <button className="switch-secondary-btn">New Repository</button>
+            </div>
+          </div>
+          <div className="switch-pane">
+            <div className="switch-pane-header">Repositories</div>
+            <div className="switch-pane-body">
+              <div className="switch-empty">No repositories yet</div>
+            </div>
+          </div>
+        </aside>
+        <section className="switch-editor" aria-label="Editor">
+          <div className="switch-tabbar">
+            <div className="switch-tab active">welcome.ts</div>
+          </div>
+          <div className="switch-editor-inner">
+            <ControlledMonacoEditor value={value} onDidValueChange={setValue} language="typescript" theme="vs-dark" />
+          </div>
+        </section>
+      </div>
+      <footer className="switch-statusbar" aria-label="Status Bar">
+        <div className="switch-status-item">SWITCH</div>
+        <div className="switch-status-item">TypeScript</div>
+        <div className="switch-status-item">UTF-8</div>
+        <div className="switch-status-item">LF</div>
+      </footer>
+    </div>
+  );
+}
diff --git a/website/webpack.config.ts b/website/webpack.config.ts
index ecc55718..de9ce553 100644
--- a/website/webpack.config.ts
+++ b/website/webpack.config.ts
@@ -107,6 +107,11 @@ module.exports = {
 			filename: "monarch.html",
 			templateContent: getHtml(),
 		}),
+		new HtmlWebpackPlugin({
+			chunks: ["index"],
+			filename: "switch.html",
+			templateContent: getHtml(),
+		}),
 		new CopyPlugin({
 			patterns: [{ from: "./static", to: "./" }],
 		}),