51 lines
981 B
Svelte
51 lines
981 B
Svelte
<script>
|
|
import { m } from '$lib/paraglide/messages';
|
|
|
|
/**
|
|
* @typedef {Object} EmptyProps
|
|
* @property {string} [message]
|
|
* @property {string} [icon]
|
|
* @property {import('svelte').Snippet} [children]
|
|
*/
|
|
|
|
/** @type {EmptyProps} */
|
|
let { message = m.no_data(), icon = '📭', children } = $props();
|
|
</script>
|
|
|
|
<div class="empty">
|
|
<div class="empty-icon">{icon}</div>
|
|
<p class="empty-message">{message}</p>
|
|
{#if children}
|
|
<div class="empty-action">
|
|
{@render children()}
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<style>
|
|
.empty {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: var(--space-3xl) var(--space-xl);
|
|
text-align: center;
|
|
}
|
|
|
|
.empty-icon {
|
|
font-size: var(--space-3xl);
|
|
margin-bottom: var(--space-md);
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.empty-message {
|
|
color: var(--color-text-secondary);
|
|
font-size: var(--font-size-lg);
|
|
margin: 0 0 var(--space-lg) 0;
|
|
}
|
|
|
|
.empty-action {
|
|
margin-top: var(--space-sm);
|
|
}
|
|
</style>
|