feat: update Monaco Editor layout and add example code snippets for JSON and JavaScript

Author: caperaven

app/monaco-editor/monaco-editor.css

@@ -1,12 +1,17 @@
 :host {
 	display: grid;
 	grid-template-rows: auto 1fr;
+	grid-template-columns: 1fr 1fr;
 	padding: var(--padding);
 	width: 100%;
 	height: 100%;
 	overflow: hidden;
 }
 
+app-header {
+	grid-column: 1 / -1;
+}
+
 #editor-wrapper {
 	height: 100%;
 	width: 100%;

app/monaco-editor/monaco-editor.html

@@ -1,2 +1,12 @@
 <app-header><h2>Monaco Editor</h2></app-header>
-<monaco-editor></monaco-editor>
+
+<monaco-editor data-language="json" data-theme="vs-dark">
+{
+    "name": "John Doe",
+    "age": 30
+}
+</monaco-editor>
+
+<monaco-editor data-language="javascript" data-theme="vs-light">
+console.log('Hello, World!');
+</monaco-editor>