37 lines
829 B
Svelte
37 lines
829 B
Svelte
<script lang="ts">
|
|
import type { Snippet } from "svelte";
|
|
|
|
let {
|
|
title,
|
|
subtitle = "",
|
|
children,
|
|
actions,
|
|
}: {
|
|
title: string;
|
|
subtitle?: string;
|
|
children?: Snippet;
|
|
actions?: Snippet;
|
|
} = $props();
|
|
</script>
|
|
|
|
<header
|
|
class="flex min-h-12 flex-wrap items-center gap-x-4 gap-y-2 px-4 pt-4 pb-1 sm:px-6"
|
|
>
|
|
<div class="flex min-w-0 items-baseline gap-2">
|
|
<h1 class="truncate font-semibold text-lg tracking-tight">{title}</h1>
|
|
{#if subtitle}
|
|
<span class="truncate text-muted-foreground text-sm">{subtitle}</span>
|
|
{/if}
|
|
</div>
|
|
{#if children}
|
|
<div class="flex min-w-0 flex-wrap items-center gap-2">
|
|
{@render children()}
|
|
</div>
|
|
{/if}
|
|
{#if actions}
|
|
<div class="ml-auto flex items-center gap-2">
|
|
{@render actions()}
|
|
</div>
|
|
{/if}
|
|
</header>
|