<script>
	import Icon from '@iconify/svelte';
	import { drawerStore } from '@skeletonlabs/skeleton';

	const routes = [
		{ path: '/composer/stateToState', name: 'StateToState', icon: 'iconoir:align-top-box' },
		{ path: '/composer/recipies', name: 'Recipies', icon: 'iconoir:stackoverflow' },
		{ path: '/composer/graphql', name: 'GraphQL', icon: 'iconoir:network-right' },
		{ path: '/composer/queries', name: 'Queries', icon: 'iconoir:brain-research' },
		{ path: '/composer/form', name: 'Form', icon: 'iconoir:input-field' }
	];
	function closeDrawer() {
		drawerStore.close();
	}
</script>

<div class="grid grid-cols-3 gap-4 p-12">
	{#each routes as route}
		<a class="flex flex-col items-center w-64 logo-item" href={route.path} on:click={closeDrawer}>
			<Icon icon={route.icon} width="96" height="96" />
			<span class="mt-2 text-center">{route.name}</span>
		</a>
	{/each}
</div>
