<script lang="ts">
	import Chapter from '$lib/components/Chapter.svelte';

	export let data;

	$: chapters = data.chapters;
</script>

<section class="flex w-full flex-col space-y-6">
	<header class="sticky flex items-center justify-between">
		<div class="flex flex-col">
			<h1 class="text-xl font-semibold">Chaptires</h1>
			<p class="text-muted">
				Les chapitres sont les différentes parties du jeu. Chaque chapitre est composé de plusieurs
				puzzles.
			</p>
		</div>
	</header>
	{#each chapters as chapter}
		<Chapter {chapter} />
	{/each}
</section>
