51 lines
1.4 KiB
Svelte
51 lines
1.4 KiB
Svelte
|
<script lang="ts">
|
||
|
|
import { musicStore } from '../../stores/musicStore'
|
||
|
|
|
||
|
|
export let song: SongData
|
||
|
|
export let slug: string
|
||
|
|
|
||
|
|
let { title, artist, coverImg } = song
|
||
|
|
|
||
|
|
const handlePlay = () => {
|
||
|
|
musicStore.setCurrent(slug)
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleQueueNext = () => {
|
||
|
|
musicStore.queueNext(slug)
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleQueueLast = () => {
|
||
|
|
musicStore.push(slug)
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<div
|
||
|
|
class="flex gap-1 flex-col rounded-lg p-4 bg-slate-800 backdrop-blur-xl shadow-md w-60 flex-grow basis-1/5"
|
||
|
|
>
|
||
|
|
<img src={coverImg} alt="album cover" class="shadow-md rounded-lg w-full" />
|
||
|
|
<p class="mt-2 text-2xl font-medium">{title}</p>
|
||
|
|
<p class="text-xl text-slate-400">{artist}</p>
|
||
|
|
<div class="flex justify-center">
|
||
|
|
<div class="my-auto flex gap-4">
|
||
|
|
<button class="mt-2 hover:brightness-75" on:click={handlePlay}>
|
||
|
|
<span class="material-symbols-outlined icon fill">play_arrow</span>
|
||
|
|
</button>
|
||
|
|
<button class="mt-2 hover:brightness-75" on:click={handleQueueNext}>
|
||
|
|
<span class="material-symbols-outlined icon fill">next_plan</span>
|
||
|
|
</button>
|
||
|
|
<button class="mt-2 hover:brightness-75" on:click={handleQueueLast}>
|
||
|
|
<span class="material-symbols-outlined icon">queue_music</span>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<style lang="postcss">
|
||
|
|
.icon {
|
||
|
|
font-size: 28px;
|
||
|
|
}
|
||
|
|
.fill {
|
||
|
|
font-variation-settings: 'FILL' 1;
|
||
|
|
}
|
||
|
|
</style>
|