93 lines
2.0 KiB
Svelte
93 lines
2.0 KiB
Svelte
<script lang="ts">
|
|
import * as m from '$lib/paraglide/messages.js';
|
|
|
|
export type EmptyVariant = 'first-run' | 'filter-empty' | 'inbox-zero';
|
|
|
|
interface Props {
|
|
variant: EmptyVariant;
|
|
}
|
|
|
|
const { variant }: Props = $props();
|
|
|
|
const title: string = $derived(
|
|
variant === 'first-run'
|
|
? m.chronik_empty_first_run_title()
|
|
: variant === 'filter-empty'
|
|
? m.chronik_empty_filter_title()
|
|
: m.chronik_inbox_zero_title()
|
|
);
|
|
|
|
const body: string = $derived(
|
|
variant === 'first-run'
|
|
? m.chronik_empty_first_run_body()
|
|
: variant === 'filter-empty'
|
|
? m.chronik_empty_filter_body()
|
|
: ''
|
|
);
|
|
</script>
|
|
|
|
<div
|
|
data-testid="chronik-empty-state"
|
|
data-variant={variant}
|
|
class="flex flex-col items-center gap-3 py-10 text-center"
|
|
>
|
|
{#if variant === 'first-run'}
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="h-10 w-10 text-ink-3"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
|
|
/>
|
|
</svg>
|
|
{:else if variant === 'filter-empty'}
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="h-10 w-10 text-ink-3"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M3 4h18M6 8h12M9 12h6M10 16h4M11 20h2"
|
|
/>
|
|
</svg>
|
|
{:else}
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="h-10 w-10 text-accent"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M9 12.75L11.25 15L15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.75c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"
|
|
/>
|
|
</svg>
|
|
{/if}
|
|
|
|
<p class="font-sans text-base font-bold text-ink">
|
|
{title}
|
|
</p>
|
|
{#if body}
|
|
<p class="max-w-md font-sans text-sm text-ink-3">
|
|
{body}
|
|
</p>
|
|
{/if}
|
|
</div>
|