42 lines
1.5 KiB
Svelte
42 lines
1.5 KiB
Svelte
<script lang="ts">
|
||
import { Sparkles } from 'lucide-svelte';
|
||
|
||
let {
|
||
label,
|
||
variant = 'pending'
|
||
}: {
|
||
/** Card title (e.g. "For You" or "Songs like…"). */
|
||
label: string;
|
||
/** Drives copy + animation. */
|
||
variant?: 'building' | 'failed' | 'pending' | 'seed-needed';
|
||
} = $props();
|
||
|
||
const copy = $derived.by(() => {
|
||
switch (variant) {
|
||
case 'building': return 'Building your daily mix…';
|
||
case 'failed': return 'Couldn’t build this mix. Retrying soon.';
|
||
case 'seed-needed': return 'Listen to more variety to unlock this slot.';
|
||
default: return 'Listen to a few tracks — appears within 24h.';
|
||
}
|
||
});
|
||
|
||
// animate-pulse on the cover area when variant is 'building' or 'pending'.
|
||
// 'pending' shows the animation since it's awaiting results within 24h.
|
||
// 'failed' and 'seed-needed' are static terminal states.
|
||
const coverClasses = $derived(
|
||
'aspect-square w-full overflow-hidden rounded-md bg-surface-hover ' +
|
||
'flex items-center justify-center text-text-muted ' +
|
||
(variant === 'building' || variant === 'pending' ? 'animate-pulse' : '')
|
||
);
|
||
</script>
|
||
|
||
<div class="flex w-full flex-col items-start gap-2 rounded-md p-2 text-left" data-testid="playlist-placeholder-card" data-variant={variant}>
|
||
<div class={coverClasses}>
|
||
<Sparkles size={40} strokeWidth={1} />
|
||
</div>
|
||
<div class="w-full min-w-0">
|
||
<div class="truncate text-sm font-medium text-text-primary">{label}</div>
|
||
<div class="truncate text-xs text-text-muted">{copy}</div>
|
||
</div>
|
||
</div>
|