<script lang="ts">
	import PlaylistListing from '$lib/components/groove/PlaylistListing.svelte';
	import { getLibraryState } from '$lib/library.svelte';

	const library = getLibraryState();
</script>

<div
	class="grid grid-cols-2 gap-4 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 xl:grid-cols-7 2xl:grid-cols-8"
>
	{#each library.playlists as playlist}
		<PlaylistListing id={playlist.id} name={playlist.name} tracks={playlist.tracks} />
	{/each}
</div>
