41 lines
2.1 KiB
HTML
41 lines
2.1 KiB
HTML
{#if entries.isEmpty()}
|
|
<div class="card bg-base-200 shadow-xl text-center" style="padding:3rem">
|
|
<p class="text-lg text-base-content/60">No releases found</p>
|
|
<p class="text-sm text-base-content/40 mt-2">Add artists to your collection to see their releases here</p>
|
|
</div>
|
|
{#else}
|
|
<div style="display:flex;flex-direction:column;gap:2.5rem">
|
|
{#for entry in entries}
|
|
<a href="https://musicbrainz.org/release-group/{entry.mbid}" target="_blank" rel="noopener noreferrer"
|
|
class="card card-side bg-base-200 border border-base-300 hover:bg-base-300 card-shadow overflow-hidden">
|
|
<figure class="w-64">
|
|
<img src="https://coverartarchive.org/release-group/{entry.mbid}/front-250"
|
|
alt="{entry.title}" class="object-cover w-full h-full"
|
|
loading="lazy"
|
|
onerror="this.parentElement.innerHTML='<div class=\'flex items-center justify-center h-full text-base-content/20\'>No Cover</div>'">
|
|
</figure>
|
|
<div class="card-body">
|
|
<h3 style="font-size:1.5rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:var(--fallback-bc,oklch(var(--bc)/0.6))">{entry.artistName}</h3>
|
|
<h2 style="font-size:2rem;font-weight:700">{entry.title}</h2>
|
|
<div style="margin-top:0.75rem">
|
|
{#if entry.firstReleaseDate}
|
|
<div style="font-size:1.5rem;color:var(--fallback-bc,oklch(var(--bc)/0.4))">{entry.firstReleaseDate}</div>
|
|
{/if}
|
|
<div style="margin-top:0.4rem">
|
|
{#if entry.primaryType == 'Album'}
|
|
<span class="badge badge-primary" style="font-size:1.5rem;padding:0.3rem 0.8rem;height:auto">Album</span>
|
|
{#else if entry.primaryType == 'Single'}
|
|
<span class="badge badge-secondary" style="font-size:1.5rem;padding:0.3rem 0.8rem;height:auto">Single</span>
|
|
{#else if entry.primaryType == 'EP'}
|
|
<span class="badge badge-accent" style="font-size:1.5rem;padding:0.3rem 0.8rem;height:auto">EP</span>
|
|
{#else}
|
|
<span class="badge badge-ghost" style="font-size:1.5rem;padding:0.3rem 0.8rem;height:auto">{entry.primaryType}</span>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
{/for}
|
|
</div>
|
|
{/if}
|