51 lines
925 B
Svelte
51 lines
925 B
Svelte
<script lang="ts">
|
|
import type { Snippet } from 'svelte';
|
|
|
|
interface Props {
|
|
title: string;
|
|
subtitle?: string;
|
|
|
|
icon?: Snippet;
|
|
actions?: Snippet;
|
|
|
|
class?: string;
|
|
}
|
|
|
|
let {
|
|
title,
|
|
subtitle,
|
|
icon,
|
|
actions,
|
|
class: className = ''
|
|
}: Props = $props();
|
|
</script>
|
|
|
|
<div class={['mb-6', className].filter(Boolean)}>
|
|
<div class="flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center">
|
|
<div class="flex items-center gap-4">
|
|
{#if icon}
|
|
<div class="bg-primary/10 rounded-xl p-3">
|
|
<div class="text-primary [&_svg]:h-8 [&_svg]:w-8">
|
|
{@render icon()}
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
|
|
<div>
|
|
<h1 class="text-primary text-3xl font-bold">{title}</h1>
|
|
{#if subtitle}
|
|
<p class="text-base-content/70">{subtitle}</p>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
|
|
{#if actions}
|
|
<div class="flex items-center gap-2">
|
|
{@render actions()}
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
|
|
|