add empty state support to DetailsSection
This commit is contained in:
parent
000cfd2332
commit
2a4789c72a
1 changed files with 18 additions and 2 deletions
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue