display placeholders

packages/standard-components/src/Layout.svelte

@@ -1,12 +1,17 @@
 <script>
-  import { log } from "console"
-
   import { getContext } from "svelte"
 
   const { styleable, transition } = getContext("sdk")
   const component = getContext("component")
   export let type = "mainSidebar"
   export let gap = "16px"
+
+  let layoutMap = {
+    mainSidebar: 2,
+    sidebarMain: 2,
+    twoColumns: 2,
+    threeColumns: 3,
+  }
 </script>
 
 <div
@@ -15,6 +20,11 @@
   class={type}
 >
   <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>
+    {/each}
+  {/if}
 </div>
 
 <style>
@@ -34,4 +44,19 @@
   .threeColumns {
     grid-template-columns: 1fr 1fr 1fr;
   }
+
+  p {
+    background-color: var(--grey-3);
+    color: var(--grey-6);
+    font-size: var(--font-size-s);
+    padding: var(--spacing-l);
+    border-radius: var(--border-radius-s);
+    display: grid;
+    place-items: center;
+  }
+  p i {
+    margin-bottom: var(--spacing-m);
+    font-size: 1.5rem;
+    color: var(--grey-5);
+  }
 </style>