69 lines
1.4 KiB
Svelte
69 lines
1.4 KiB
Svelte
<script lang="ts">
|
|
import Marquee from "$lib/components/ui/Marquee.svelte";
|
|
import { dateToYear } from "$lib/util/functions";
|
|
import { LinkType, type Track } from "$lib/util/types";
|
|
|
|
export let track: Track;
|
|
</script>
|
|
|
|
<div class="trackname">
|
|
<div class="title w-full">
|
|
<Marquee
|
|
items={[
|
|
{
|
|
id: track.album.id,
|
|
itemId: track.id,
|
|
title: track.name,
|
|
linkType: LinkType.Album,
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
<div class="s1 w-full text-sm text-base-content text-opacity-60">
|
|
<Marquee
|
|
items={track.artists.map((a) => {
|
|
return { id: a.id, title: a.name, linkType: LinkType.Artist };
|
|
})}
|
|
/>
|
|
</div>
|
|
<div class="s2 w-full text-sm text-base-content text-opacity-60">
|
|
<Marquee
|
|
items={[
|
|
{
|
|
id: track.album.id,
|
|
title: track.album.name,
|
|
linkType: LinkType.Album,
|
|
},
|
|
]}
|
|
suffix={track.album.releaseDate
|
|
? "\u00a0•\u00a0" + dateToYear(track.album.releaseDate)
|
|
: undefined}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<style lang="postcss">
|
|
.trackname {
|
|
display: grid;
|
|
grid-template: "title title" "s1 s1" "s2 s2" / auto 1fr;
|
|
|
|
align-items: center;
|
|
column-gap: 8px;
|
|
}
|
|
|
|
.title {
|
|
grid-area: title;
|
|
}
|
|
|
|
.s1 {
|
|
grid-area: s1;
|
|
justify-self: start;
|
|
min-width: 0;
|
|
}
|
|
|
|
.s2 {
|
|
grid-area: s2;
|
|
justify-self: start;
|
|
min-width: 0;
|
|
}
|
|
</style>
|