30 lines
1.1 KiB
Svelte
30 lines
1.1 KiB
Svelte
|
<script lang="ts">
|
||
|
|
let { songs, playing } = $props()
|
||
|
|
|
||
|
|
let displaySongs = $derived([
|
||
|
|
playing > 0 && playing < songs.length ? songs[playing - 1] : { name: "", image: "" },
|
||
|
|
songs[playing],
|
||
|
|
playing == songs.length - 1 ? { name: "", image: "" } : songs[playing + 1],
|
||
|
|
])
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<div class="relative flex w-full justify-center overflow-hidden">
|
||
|
|
<div class="flex w-fit flex-row gap-4">
|
||
|
|
{#each displaySongs as song, i}
|
||
|
|
{#if song.name != ""}
|
||
|
|
<div class={`relative flex flex-col items-center transition-all duration-300 ${i === 1 ? "z-10 mx-2 scale-100" : "z-0 opacity-70"}`}>
|
||
|
|
<img
|
||
|
|
class="h-[60vw] max-h-[250px] w-[60vw]
|
||
|
|
max-w-[250px] rounded object-cover transition-all duration-300"
|
||
|
|
src={song.image}
|
||
|
|
alt="Song cover"
|
||
|
|
/>
|
||
|
|
{#if i === 1}
|
||
|
|
<h1 class="mt-2">{song.name}</h1>
|
||
|
|
{/if}
|
||
|
|
</div>
|
||
|
|
{/if}
|
||
|
|
{/each}
|
||
|
|
</div>
|
||
|
|
</div>
|