62 lines
1.1 KiB
Svelte
62 lines
1.1 KiB
Svelte
<script lang="ts">
|
|
import type { Snippet } from 'svelte';
|
|
import { ArrowLeft } from 'lucide-svelte';
|
|
|
|
let {
|
|
title,
|
|
kicker,
|
|
subtitle,
|
|
backHref,
|
|
backLabel,
|
|
className = '',
|
|
titleClassName = 'editorial-title',
|
|
meta,
|
|
actions,
|
|
children
|
|
}: {
|
|
title: string;
|
|
kicker?: string;
|
|
subtitle?: string;
|
|
backHref?: string;
|
|
backLabel?: string;
|
|
className?: string;
|
|
titleClassName?: string;
|
|
meta?: Snippet;
|
|
actions?: Snippet;
|
|
children?: Snippet;
|
|
} = $props();
|
|
</script>
|
|
|
|
<section class={`editorial-hero reveal-1 ${className}`.trim()}>
|
|
{#if backHref && backLabel}
|
|
<a href={backHref} class="editorial-backlink"><ArrowLeft class="size-4" /> {backLabel}</a>
|
|
{/if}
|
|
|
|
{#if kicker}
|
|
<p class="editorial-kicker">{kicker}</p>
|
|
{/if}
|
|
|
|
<h1 class={titleClassName}>{title}</h1>
|
|
|
|
{#if subtitle}
|
|
<p class="editorial-subtitle">{subtitle}</p>
|
|
{/if}
|
|
|
|
{#if meta}
|
|
<div class="page-header-meta">
|
|
{@render meta()}
|
|
</div>
|
|
{/if}
|
|
|
|
{#if actions}
|
|
<div class="editorial-toolbar">
|
|
{@render actions()}
|
|
</div>
|
|
{/if}
|
|
|
|
{#if children}
|
|
<div class="page-header-foot">
|
|
{@render children()}
|
|
</div>
|
|
{/if}
|
|
</section>
|