Jake
5778696140
Reduces first-run cognitive load. Save / Copy / Clear / Export now appear only once the user has a transcript or is recording, sliding in via animate-fade-in (brand --duration-ui + ease-out-quart). Template and Extract Tasks remain always-visible because they shape transcription rather than acting on completed content. Empty state now leads with the catchphrase as a brand statement (font-display italic 28px) with the hotkey hint demoted to body-font tertiary. EmptyState gains an optional headline prop; callers without it render unchanged.
23 lines
829 B
Svelte
23 lines
829 B
Svelte
<script>
|
|
let { icon: Icon = null, headline = '', message = '', actionLabel = '', onAction = null } = $props();
|
|
</script>
|
|
|
|
<div class="flex flex-col items-center justify-center gap-3 py-16 text-text-secondary">
|
|
{#if Icon}
|
|
<Icon size={48} strokeWidth={1} class="opacity-40 mb-1" aria-hidden="true" />
|
|
{/if}
|
|
{#if headline}
|
|
<p class="font-display italic text-[28px] text-text text-center leading-tight">{headline}</p>
|
|
{/if}
|
|
{#if message}
|
|
<p class="text-center max-w-xs leading-relaxed {headline ? 'text-text-tertiary' : ''}">{message}</p>
|
|
{/if}
|
|
{#if actionLabel && onAction}
|
|
<button onclick={onAction}
|
|
class="px-4 py-2 rounded-lg bg-accent text-bg text-sm font-medium hover:bg-accent-hover"
|
|
style="transition-duration: var(--duration-ui)">
|
|
{actionLabel}
|
|
</button>
|
|
{/if}
|
|
</div>
|