From d021281df378d9dd66caf9da76981b7b4da2f810 Mon Sep 17 00:00:00 2001
From: Samuel Andert <samuel@ora.earth>
Date: Sat, 22 Jul 2023 09:58:26 +0200
Subject: [PATCH] Added dynamic layouts to the composite loader

---
 src/lib/components/Composite.svelte | 25 +++++++--------
 src/routes/+layout.svelte           |  5 ++-
 src/routes/+page.svelte             | 50 +++++++++++++++++------------
 3 files changed, 45 insertions(+), 35 deletions(-)

diff --git a/src/lib/components/Composite.svelte b/src/lib/components/Composite.svelte
index b12f1bc..0bdab60 100644
--- a/src/lib/components/Composite.svelte
+++ b/src/lib/components/Composite.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
 	import components from '$lib/components.ts';
 	export let componentsData = [];
-	export let name = '';
 
 	async function getComponent(componentName) {
 		if (components[componentName]) {
@@ -12,16 +11,14 @@
 	}
 </script>
 
-{#each componentsData as component (component.id)}
-	{#await getComponent(component.componentName) then Component}
-		{#if Component}
-			<svelte:component
-				this={Component}
-				name={component.name}
-				componentsData={component.components}
-			/>
-		{:else}
-			<p>Component {component.componentName} not found.</p>
-		{/if}
-	{/await}
-{/each}
+<div class="grid" style="display: grid; {componentsData.layout || ''}">
+	{#each componentsData.children as component (component.id)}
+		{#await getComponent(component.componentName) then Component}
+			{#if Component}
+				<svelte:component this={Component} {...component.props} class={component.slot} />
+			{:else}
+				<p>Component {component.componentName} not found.</p>
+			{/if}
+		{/await}
+	{/each}
+</div>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 9c99ca6..fab569f 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -4,4 +4,7 @@
 </script>
 
 <Provider />
-<slot />
+
+<div class="w-screen h-screen overflow-hidden relative">
+	<slot />
+</div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 5187726..9c95329 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -10,32 +10,42 @@
 	import MessageInput from '$lib/components/MessageInput.svelte';
 	import Composite from '$lib/components/Composite.svelte';
 
-	let componentsData = [
-		{
-			id: 2,
-			componentName: 'Composite',
-			name: 'Nested Composite',
-			components: [
-				{
-					id: 3,
-					componentName: 'LitStatus',
-					name: 'LitStatus'
-				},
-				{
-					id: 4,
-					componentName: 'MessageInput',
-					name: 'MessageInput'
-				}
-			]
-		}
-	];
 	let pkpWallet;
 	let authSig;
 	let pkpPubKey =
 		'046da3ba67065fd1e2726242ca01cd4601524893f4aa4b0042578fa6cbec28fa8c9a28eb9f7893932fc09717edc9e1db57e157a21eed346247c1db5a722a01f571';
+	let componentsData = {
+		layout: `
+			grid-template-areas: 
+				"header"
+				"main"
+				"footer";
+			grid-template-rows: auto 1fr auto;
+		`,
+		children: [
+			{
+				id: 1,
+				componentName: 'LitStatus',
+				props: {},
+				slot: 'header'
+			},
+			{
+				id: 2,
+				componentName: 'Messages',
+				props: {},
+				slot: 'main'
+			},
+			{
+				id: 3,
+				componentName: 'MessageInput',
+				props: {},
+				slot: 'footer'
+			}
+		]
+	};
 </script>
 
-<Composite {componentsData} name="Main Composite" />
+<Composite {componentsData} />
 
 <!-- <LitStatus />
 <AuthSign /> -->