From f2139849ee5e55cc0d6f1843eb1d0978f72cabfe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Fri, 4 Jun 2021 14:34:52 +0200
Subject: [PATCH] display placeholders

---
 .../standard-components/src/Layout.svelte     | 29 +++++++++++++++++--
 1 file changed, 27 insertions(+), 2 deletions(-)

diff --git a/packages/standard-components/src/Layout.svelte b/packages/standard-components/src/Layout.svelte
index 7b8a2f93b4..c896b7f2b4 100644
--- a/packages/standard-components/src/Layout.svelte
+++ b/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>