Added dynamic layouts to the composite loader

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>

src/routes/+layout.svelte

@@ -4,4 +4,7 @@
 </script>
 
 <Provider />
-<slot />
+
+<div class="w-screen h-screen overflow-hidden relative">
+	<slot />
+</div>

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 /> -->