From edd67213b22bb15c1c50f255d48ff03f9b362db5 Mon Sep 17 00:00:00 2001
From: Danielo Rodriguez <rdanielo@gmail.com>
Date: Sun, 10 Dec 2023 00:25:15 +0100
Subject: [PATCH] chore: code component

---
 src/views/FormBuilder.svelte               |  7 ++++++-
 src/views/components/Code.svelte           | 17 +++++++++++++++++
 src/views/components/TemplateEditor.svelte | 18 +++++++++++++++++-
 3 files changed, 40 insertions(+), 2 deletions(-)
 create mode 100644 src/views/components/Code.svelte

diff --git a/src/views/FormBuilder.svelte b/src/views/FormBuilder.svelte
index 18e5a214..836fe944 100644
--- a/src/views/FormBuilder.svelte
+++ b/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;
diff --git a/src/views/components/Code.svelte b/src/views/components/Code.svelte
new file mode 100644
index 00000000..2e8b3ed5
--- /dev/null
+++ b/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>
diff --git a/src/views/components/TemplateEditor.svelte b/src/views/components/TemplateEditor.svelte
index 0156ca89..465a4d9a 100644
--- a/src/views/components/TemplateEditor.svelte
+++ b/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>