chore: code component

src/views/FormBuilder.svelte

@@ -127,7 +127,9 @@
     <Tabs bind:activeTab={currentTab} tabs={["form", "template"]} />
     <div class="body">
         {#if currentTab === "template"}
-            <TemplateEditor formName={definition.name} {fieldNames} />
+            <div class="template">
+                <TemplateEditor formName={definition.name} {fieldNames} />
+            </div>
         {:else}
             <form on:submit|preventDefault={handleSubmit}>
                 <fieldset class="flex column gap2 header">
@@ -430,6 +432,9 @@
             overflow: hidden;
         }
     }
+    .template {
+        padding: 1rem;
+    }
     .fields {
         overflow-y: auto;
         padding: 1rem;

src/views/components/Code.svelte

@@ -0,0 +1,17 @@
+<div>
+    <pre><code><slot /></code></pre>
+</div>
+
+<style>
+    pre {
+        background-color: var(--background-secondary);
+        border-radius: var(--border-radius);
+        padding: 0.5rem;
+    }
+    code {
+        font-family: var(--font-family-monospace);
+    }
+    div {
+        display: flex;
+    }
+</style>

src/views/components/TemplateEditor.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+    import Code from "./Code.svelte";
+
     let templateString = "";
     export let formName: string;
     export let fieldNames: string[];
@@ -15,8 +17,12 @@
     any text you want and reference the form fields using the <code
         >{`{{name}}`}</code
     >
-    syntax. For example: <code>{exampleText}</code>
+    syntax.
 </p>
+<div>
+    <div>For example:</div>
+    <Code>{exampleText}</Code>
+</div>
 <div class="fields-list">
     Available fields:
     <ul>
@@ -32,3 +38,13 @@
     class="form-control"
     placeholder="Enter template here"
 ></textarea>
+
+<style>
+    .fields-list {
+        padding-top: 1rem;
+    }
+    textarea {
+        font-family: var(--font-family-monospace);
+        width: 100%;
+    }
+</style>