adds backbutton and second level handling

packages/builder/src/components/userInterface/ComponentSelectionList.svelte

@@ -18,7 +18,7 @@
     {/each}
   </ul>
   <div class="panel">
-    <Tab components={selectedCategory.components} />
+    <Tab list={selectedCategory} />
   </div>
 </div>
 

packages/builder/src/components/userInterface/ComponentTab/Item.svelte

@@ -1,17 +1,15 @@
 <script>
-  export let icon = ""
+  export let component
-  export let name = ""
-  export let description = ""
 </script>
 
-<div class="component-item">
+<div class="component-item" on:click>
   <div class="component-icon">
-    <i class={icon} />
+    <i class={component.icon} />
   </div>
   <div class="component-text">
-    <div class="component-name">{name}</div>
+    <div class="component-name">{component.name}</div>
     <div class="component-description">
-      <p>{description}</p>
+      <p>{component.description}</p>
     </div>
   </div>
 </div>

packages/builder/src/components/userInterface/ComponentTab/Tab.svelte

@@ -1,10 +1,39 @@
 <script>
   import Item from "./Item.svelte"
-  export let components
+  export let list
+  let category = list
 
-  console.log("Components: ", components)
+  const handleClick = component => {
+    if (component.type && component.type.length > 0) {
+      list = component
+    } else {
+      console.log("Here be dragons that add the component! 🐉")
+    }
+  }
+
+  const goBack = () => {
+    list = category
+  }
 </script>
 
-{#each components as { icon, name, description }}
+{#if !list.isCategory}
-  <Item {icon} {name} {description} />
+  <button class="back-button" on:click={() => (list = category)}>Back</button>
+{/if}
+
+{#each list.type as component}
+  <Item {component} on:click={() => handleClick(component)} />
 {/each}
+
+<style>
+  .back-button {
+    font-size: 16px;
+
+    width: 100%;
+    text-align: center;
+    height: 40px;
+    border-radius: 3px;
+    border: solid 1px #e8e8ef;
+    background: white;
+    margin-bottom: 20px;
+  }
+</style>

packages/builder/src/components/userInterface/temporaryPanelStructure.js

@@ -2,7 +2,8 @@ export default {
   categories: [
     {
       name: 'Basic',
-      components: [
+      isCategory: true,
+      type: [
         {
           name: 'Container',
           description: 'This component contains things within itself',
@@ -71,7 +72,8 @@ export default {
     },
     {
       name: 'Form',
-      components: [
+      isCategory: true,
+      type: [
         {
           name: 'Button',
           description: 'A basic html button that is ready for styling',
@@ -104,7 +106,8 @@ export default {
     },
     {
       name: 'Blocks',
-      components: [
+      isCategory: true,
+      type: [
         {
           name: 'Container',
           description: 'This component contains things within itself',
@@ -173,7 +176,8 @@ export default {
     },
     {
       name: 'Data',
-      components: [
+      isCategory: true,
+      type: [
         {
           name: 'Container',
           description: 'This component contains things within itself',