59 lines
1.5 KiB
Svelte
59 lines
1.5 KiB
Svelte
<script lang="ts">
|
|
import type { Snippet } from 'svelte';
|
|
|
|
interface Props {
|
|
title: string;
|
|
description?: string | null;
|
|
icon?: Snippet;
|
|
actions?: Snippet;
|
|
spacious?: boolean;
|
|
}
|
|
|
|
let { title, description = null, icon, actions, spacious = false }: Props = $props();
|
|
</script>
|
|
|
|
<div class="empty" class:spacious role="status">
|
|
{#if icon}
|
|
<div class="icon">{@render icon()}</div>
|
|
{/if}
|
|
<h3 class="title">{title}</h3>
|
|
{#if description}<p class="desc">{description}</p>{/if}
|
|
{#if actions}<div class="actions">{@render actions()}</div>{/if}
|
|
</div>
|
|
|
|
<style>
|
|
.empty {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
padding: var(--space-6);
|
|
gap: var(--space-3);
|
|
color: var(--text-secondary);
|
|
border-radius: var(--radius-lg);
|
|
background: color-mix(in oklab, var(--surface) 60%, transparent);
|
|
}
|
|
.spacious { padding: var(--space-12) var(--space-6); }
|
|
.icon {
|
|
color: var(--text-tertiary);
|
|
margin-bottom: var(--space-2);
|
|
}
|
|
.title {
|
|
margin: 0;
|
|
font-size: var(--text-md);
|
|
font-weight: var(--weight-semibold);
|
|
color: var(--text-primary);
|
|
}
|
|
.desc {
|
|
margin: 0;
|
|
font-size: var(--text-sm);
|
|
color: var(--text-tertiary);
|
|
max-width: 44ch;
|
|
}
|
|
.actions {
|
|
margin-top: var(--space-4);
|
|
display: flex;
|
|
gap: var(--space-2);
|
|
}
|
|
</style>
|