2024-02-23 14:56:35 -08:00
|
|
|
<!--
|
|
|
|
@component
|
|
|
|
|
|
|
|
Displays the list of songs
|
|
|
|
-->
|
2024-02-21 23:36:24 -08:00
|
|
|
<script lang="ts">
|
|
|
|
import Song from './Song.svelte'
|
|
|
|
import { songList } from '../../Dashboard/MediaPlayer/songList'
|
2024-02-23 18:19:32 -08:00
|
|
|
import { fade } from 'svelte/transition'
|
2024-02-21 23:36:24 -08:00
|
|
|
</script>
|
|
|
|
|
|
|
|
<div
|
|
|
|
class="flex gap-4 w-full py-10 px-10 bg-blue-200 bg-opacity-25 backdrop-blur-xl h-full media-background rounded-3xl flex-wrap"
|
2024-02-23 18:19:32 -08:00
|
|
|
in:fade={{ duration: 150, delay: 150 }}
|
|
|
|
out:fade={{ duration: 150 }}
|
2024-02-21 23:36:24 -08:00
|
|
|
>
|
2024-02-23 14:56:35 -08:00
|
|
|
<h2 class="text-8xl font-bold basis-full text-slate-200">Music</h2>
|
|
|
|
<div class="basis-full h-2" />
|
2024-02-21 23:36:24 -08:00
|
|
|
{#each Object.entries(songList) as [slug, song]}
|
|
|
|
<Song {song} {slug} />
|
|
|
|
{/each}
|
|
|
|
</div>
|