diff --git a/web/src/lib/components/ui/EmptyState.stories.svelte b/web/src/lib/components/ui/EmptyState.stories.svelte index 39b324e1f..16b9da158 100644 --- a/web/src/lib/components/ui/EmptyState.stories.svelte +++ b/web/src/lib/components/ui/EmptyState.stories.svelte @@ -27,3 +27,5 @@ name="Card" args={{ message: "No issues yet.", icon: Inbox, shadow: true, background: true }} /> + + diff --git a/web/src/lib/components/ui/EmptyState.svelte b/web/src/lib/components/ui/EmptyState.svelte index 3fc381dff..f49062267 100644 --- a/web/src/lib/components/ui/EmptyState.svelte +++ b/web/src/lib/components/ui/EmptyState.svelte @@ -9,6 +9,8 @@ border?: CardVariants["border"]; shadow?: CardVariants["shadow"]; background?: CardVariants["background"]; + size?: "default" | "inline"; + class?: string; children?: Snippet; } @@ -18,21 +20,34 @@ border = true, shadow = false, background = false, + size = "default", + class: className, children }: Props = $props(); const Icon = $derived(icon); - - {#if Icon} - +{#if size === "inline"} +

+ {message}{@render children?.()} +

+{:else} + + {#if Icon} + +{/if}