bvandeusen
0eb346e0c6
Square card with cover (or "No tracks yet" glyph fallback), name,
track count, and owner attribution when the playlist isn't the
current user's. Click navigates to /playlists/{id}.
39 lines
1.2 KiB
Svelte
39 lines
1.2 KiB
Svelte
<script lang="ts">
|
|
import { goto } from '$app/navigation';
|
|
import type { Playlist } from '$lib/api/types';
|
|
import { user } from '$lib/auth/store.svelte';
|
|
|
|
let { playlist }: { playlist: Playlist } = $props();
|
|
|
|
const isOwn = $derived(user.value?.id === playlist.user_id);
|
|
</script>
|
|
|
|
<button
|
|
type="button"
|
|
onclick={() => goto(`/playlists/${playlist.id}`)}
|
|
class="group flex w-full flex-col items-start gap-2 rounded-md p-2 text-left hover:bg-surface-hover"
|
|
>
|
|
<div class="aspect-square w-full overflow-hidden rounded-md bg-surface-hover">
|
|
{#if playlist.cover_url}
|
|
<img
|
|
src={playlist.cover_url}
|
|
alt=""
|
|
class="h-full w-full object-cover transition-transform group-hover:scale-105"
|
|
/>
|
|
{:else}
|
|
<div class="flex h-full w-full items-center justify-center text-text-muted">
|
|
<span class="text-xs">No tracks yet</span>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
<div class="w-full min-w-0">
|
|
<div class="truncate text-sm font-medium text-text-primary">{playlist.name}</div>
|
|
<div class="truncate text-xs text-text-muted">
|
|
{playlist.track_count} {playlist.track_count === 1 ? 'track' : 'tracks'}
|
|
{#if !isOwn}
|
|
· by {playlist.owner_username}
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
</button>
|