add empty state support to DetailsSection

This commit is contained in:
Justin Edmund 2025-12-02 17:19:38 -08:00
parent 000cfd2332
commit 2a4789c72a

View file

@ -4,14 +4,22 @@
interface Props {
title: string
children: Snippet
/** Message to show when section has no content */
emptyMessage?: string
/** Whether the section is empty (shows emptyMessage instead of children) */
empty?: boolean
}
let { title, children }: Props = $props()
let { title, children, emptyMessage, empty = false }: Props = $props()
</script>
<div class="details-section">
<h3>{title}</h3>
{@render children()}
{#if empty && emptyMessage}
<p class="empty-message">{emptyMessage}</p>
{:else}
{@render children()}
{/if}
</div>
<style lang="scss">
@ -28,5 +36,13 @@
color: var(--text-primary);
padding: 0 spacing.$unit;
}
.empty-message {
text-align: center;
color: var(--text-secondary);
font-size: typography.$font-small;
padding: spacing.$unit-5x spacing.$unit;
margin: 0;
}
}
</style>