From 75d58eafea2e4b79ad617155cc6676bbc327ecac Mon Sep 17 00:00:00 2001
From: Samuel Andert <samuel@ora.earth>
Date: Tue, 25 Jul 2023 16:10:15 +0200
Subject: [PATCH] feat(Composite.svelte): update layout interface

Refactor the Composite component to support a new layout format with additional customization through the customTailwind property. This change simplifies the way layouts are defined and provides greater flexibility for design customizations.

BREAKING CHANGE: The layout interface in Composite.svelte has been modified. Components that depend on the old layout structure may need to be updated.
---
 src/lib/components/Composite.svelte | 11 ++++++++++-
 src/routes/+page.svelte             | 14 ++++++--------
 2 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/lib/components/Composite.svelte b/src/lib/components/Composite.svelte
index fa72ec9..0237222 100644
--- a/src/lib/components/Composite.svelte
+++ b/src/lib/components/Composite.svelte
@@ -8,6 +8,12 @@
 		layout: '',
 		children: []
 	};
+	$: layoutStyle = `
+        grid-template-areas: ${componentsData.layout.areas};
+        gap: ${componentsData.layout.gap || '0px'};
+        grid-template-columns: ${componentsData.layout.columns || '1fr'};
+        grid-template-rows: ${componentsData.layout.rows || 'auto'};
+    `;
 
 	function initializeComponentState(child) {
 		child.store = createComponentStore(child.id, child.state || {});
@@ -86,7 +92,10 @@
 	}
 </script>
 
-<div class="grid w-full h-full" style="display: grid; {componentsData.layout || ''}">
+<div
+	class={`grid w-full h-full ${componentsData.layout.customTailwind || ''}`}
+	style="display: grid; {layoutStyle}"
+>
 	{#each componentsData.children as component (component.id)}
 		{#await Promise.all( [getComponent(component.componentName), getServiceProps(component)] ) then [Component, serviceProps]}
 			{#if Component}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index f298f22..ff018a7 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -2,14 +2,12 @@
 	import Composite from '$lib/components/Composite.svelte';
 
 	let componentsData = {
-		layout: `
-			grid-template-areas: 
-			"auth",
-				"header",
-				"main",
-				"footer"
-			grid-template-rows: 1fr 1fr auto;
-		`,
+		layout: {
+			areas: `"nav", "main", "footer"`,
+			gap: '10px',
+			columns: '1fr',
+			template: 'auto 1fr auto'
+		},
 		children: [
 			{
 				id: '1',