<script>
	import Composite from '$lib/core/Composite.svelte';

	let composite = {
		id: 'hello',
		store: {
			title: 'Hello Earth',
			description:
				'Here you can find all the references, how to use the store and mapping logic of store to store and data to store maps',
			helloMapMe: 'this is going to be mapped'
		},
		layout: {
			areas: `
				"main aside"
				"main aside"
				"footer footer";
			`,
			columns: '1fr 1fr',
			rows: '1fr 1fr auto'
		},
		children: [
			{
				id: 'earth',
				component: 'HelloEarth',
				slot: 'main',
				store: {
					hello: 'define me directly',
					hello2: 'overwrite me with the mapping value'
				},
				map: {
					title: '@hello:title',
					description: '@hello:description',
					hello2: '@hello:helloMapMe',
					pkpWallet: '@wallet:pkpWallet',
					todos: '@data:queryTodos'
				},
				services: ['helloEarthAlert']
			},
			{
				id: 'form',
				component: 'Form',
				slot: 'aside'
			},
			{
				id: 'terminal',
				component: 'Terminal',
				slot: 'footer'
			}
		]
	};
</script>

<Composite {composite} />
