docs: fixed docs

Author: Raymond Ottun

web/components/Compile.jsx

@@ -45,33 +45,44 @@ export const Compile = () => {
 
   return (
     <div className='w-full'>
-      <div className='my-4 flex space-x-4'>
-        <label className='inline-block' htmlFor="examples">Examples</label>
-        <select id='examples' className='inline-block'
-          onChange={(e) => { changeTemplate(e) }}>
-          {
-            templates.map((template) => (
-              <option key={template.name} value={template.name}>{template.label}</option>
-            ))
-          }
-        </select>
+      <div style={{ display: "flex", padding: "10px 0", gap: "10px" }}>
+        <div>
+          <label htmlFor="examples">Example Templates</label>
+        </div>
+        <div>
+          <select id='examples'
+            onChange={(e) => { changeTemplate(e) }}>
+            {
+              templates.map((template) => (
+                <option key={template.name} value={template.name}>{template.label}</option>
+              ))
+            }
+          </select>
+        </div>
+
       </div>
+      <div style={{ display: 'flex', gap: "10px" }}>
+        <div style={{ flex: 1 }}>
+          <h3 style={{ padding: "8px 0" }}>Template</h3>
+          <Editor
+            height='70vh' theme='vs-dark'
+            options={{ minimap: { enabled: false }, readOnly: false }}
+            language={currTemplate}
+            value={templates.find((template) => template.name === currTemplate).template}
+            onChange={handleChange}
+          />
+        </div>
 
+        <div style={{ flex: 1 }}>
+          <h3 style={{ padding: "8px 0" }}>Result</h3>
+          <Editor
+            height='70vh' theme='vs-dark'
+            options={{ minimap: { enabled: false }, readOnly: true, formatOnPaste: true, formatOnType: true, renderControlCharacters: false, renderWhitespace: 'none', renderFinalNewline: true, renderIndentGuides: true, renderLineHighlight: 'none', renderLineNumbers: 'off', renderValidationDecorations: 'off', scrollBeyondLastLine: false, wordWrap: 'on' }}
+            language={currTemplate}
+            value={content}
+          />
+        </div>
 
-      <div style={{ display: 'flex' }}>
-        <Editor
-          height='70vh' theme='vs-dark'
-          options={{ minimap: { enabled: false }, readOnly: false }}
-          language={currTemplate}
-          value={templates.find((template) => template.name === currTemplate).template}
-          onChange={handleChange}
-        />
-        <Editor
-          height='70vh' theme='vs-dark'
-          options={{ minimap: { enabled: false }, readOnly: true, formatOnPaste: true, formatOnType: true, renderControlCharacters: false, renderWhitespace: 'none', renderFinalNewline: true, renderIndentGuides: true, renderLineHighlight: 'none', renderLineNumbers: 'off', renderValidationDecorations: 'off', scrollBeyondLastLine: false, wordWrap: 'on' }}
-          language={currTemplate}
-          value={content}
-        />
       </div>
     </div>
   )