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

	let componentsData = {
		layout: {
			areas: `   
				"header header header"
				"main main aside"
				"footer footer footer";
			`,
			columns: '1fr 1fr 1fr',
			rows: 'auto 1fr auto'
		},
		children: [
			{
				id: '1',
				componentName: 'GoogleAuth',
				slot: 'header',
				services: ['setupLit']
			},
			{
				id: '2',
				componentName: 'Messages',
				slot: 'main'
			},
			{
				id: '4',
				componentName: 'Wallet',
				slot: 'aside',
				state: {
					rpcURL: 'https://rpc.gnosischain.com/',
					pkpPubKey:
						'046da3ba67065fd1e2726242ca01cd4601524893f4aa4b0042578fa6cbec28fa8c9a28eb9f7893932fc09717edc9e1db57e157a21eed346247c1db5a722a01f571'
				}
			},
			{
				id: '3',
				componentName: 'Terminal',
				slot: 'footer'
			}
		]
	};
</script>

<Composite {componentsData} />
