Added dynamic layouts to the composite loader

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