44 lines
1.3 KiB
Svelte
44 lines
1.3 KiB
Svelte
<script lang="ts">
|
|
export let hash: string;
|
|
export let coverURL: string | undefined = undefined;
|
|
export let songName: string | undefined = undefined;
|
|
export let mapper: string | undefined = undefined;
|
|
export let stars: number | undefined = undefined;
|
|
export let timeset: number | undefined = undefined;
|
|
</script>
|
|
|
|
<div class="aspect-square bg-black/30">
|
|
{#if coverURL}
|
|
<img
|
|
src={coverURL}
|
|
alt={songName ?? hash}
|
|
loading="lazy"
|
|
class="h-full w-full object-cover"
|
|
/>
|
|
{:else}
|
|
<div class="h-full w-full flex items-center justify-center text-xs text-muted">No cover</div>
|
|
{/if}
|
|
</div>
|
|
<div class="p-3">
|
|
<div class="font-semibold truncate" title={songName ?? hash}>
|
|
{songName ?? hash}
|
|
</div>
|
|
{#if mapper}
|
|
<div class="mt-0.5 text-xs text-muted truncate flex items-center justify-between">
|
|
<span>
|
|
{mapper}
|
|
{#if stars !== undefined}
|
|
<span class="ml-3" title="BeatLeader star rating">★ {stars.toFixed(2)}</span>
|
|
{/if}
|
|
</span>
|
|
{#if timeset !== undefined}
|
|
<span class="text-[11px] ml-2">{new Date(timeset * 1000).toLocaleDateString()}</span>
|
|
{/if}
|
|
</div>
|
|
{/if}
|
|
<slot name="difficulty" />
|
|
<slot name="content" />
|
|
<slot name="actions" />
|
|
</div>
|
|
|