Add SplitLayout demo

Author: bendera

packages/demo/src/main.tsx

@@ -7,6 +7,7 @@ import BadgePage from "./routes/BadgePage.tsx";
 import CheckboxPage from "./routes/CheckboxPage.tsx";
 import RadioPage from "./routes/RadioPage.tsx";
 import SingleSelectPage from "./routes/SingleSelectPage.tsx";
+import SplitLayoutPage from "./routes/SplitLayout.tsx";
 import TextareaPage from "./routes/Textarea.tsx";
 import TextfieldPage from "./routes/Textfield.tsx";
 
@@ -35,6 +36,10 @@ const router = createBrowserRouter([
         path: "/single-select",
         element: <SingleSelectPage />,
       },
+      {
+        path: "/split-layout",
+        element: <SplitLayoutPage />,
+      },
       {
         path: "/textarea",
         element: <TextareaPage />,

packages/demo/src/routes/Root.tsx

@@ -10,6 +10,7 @@ export default function Root() {
           <li><a href="/checkbox">Checkbox</a></li>
           <li><a href="/radio">Radio</a></li>
           <li><a href="/single-select">Single Select</a></li>
+          <li><a href="/split-layout">Split Layout</a></li>
           <li><a href="/textarea">Textarea</a></li>
           <li><a href="/textfield">Textfield</a></li>
         </ul>

packages/demo/src/routes/SplitLayout.tsx

@@ -0,0 +1,44 @@
+import { VscodeSplitLayout } from "@vscode-elements/react-elements";
+
+function logEvents(ev: unknown) {
+  console.log(ev);
+}
+
+export default function SplitLayoutPage() {
+  return (
+    <div>
+      <h1>Split Layout</h1>
+      <VscodeSplitLayout
+        style={{ width: "500px", height: "500px" }}
+        onVscSplitLayoutChange={logEvents}
+      >
+        <div
+          slot="start"
+          style={{
+            alignItems: "center",
+            display: "flex",
+            height: "100%",
+            justifyContent: "center",
+            overflow: "hidden",
+            width: "100%",
+          }}
+        >
+          start
+        </div>
+        <div
+          slot="end"
+          style={{
+            alignItems: "center",
+            display: "flex",
+            height: "100%",
+            justifyContent: "center",
+            overflow: "hidden",
+            width: "100%",
+          }}
+        >
+          end
+        </div>
+      </VscodeSplitLayout>
+    </div>
+  );
+}