Update section component to use new placeholder styles

packages/standard-components/manifest.json

@@ -58,6 +58,7 @@
         "type": "select",
         "label": "Direction",
         "key": "direction",
+        "key": "direction",
         "showInBar": true,
         "options": [
           {
@@ -172,6 +173,7 @@
     "styleable": true,
     "transitionable": true,
     "illegalChildren": ["Section"],
+    "showEmptyState": false,
     "settings": [
       {
         "type": "section",

packages/standard-components/src/Section.svelte

@@ -1,8 +1,10 @@
 <script>
   import { getContext } from "svelte"
+  import Placeholder from "./Placeholder.svelte"
 
-  const { styleable, transition } = getContext("sdk")
+  const { styleable, transition, builderStore } = getContext("sdk")
   const component = getContext("component")
+
   export let type = "mainSidebar"
   export let gap = "16px"
   export let minSize = 250
@@ -36,7 +38,9 @@
   <slot />
   {#if layoutMap[type] - $component.children > 0}
     {#each new Array(layoutMap[type] - $component.children) as _}
-      <p><i class="ri-image-line" />Add some components to display.</p>
+      <div class:placeholder={$builderStore.inBuilder}>
+        <Placeholder />
+      </div>
     {/each}
   {/if}
 </div>
@@ -79,4 +83,9 @@
     font-size: 1.5rem;
     color: var(--grey-5);
   }
+
+  .placeholder {
+    border: 2px dashed var(--grey-5);
+    padding: var(--spacing-l);
+  }
 </style>