feat(Section) add headerContent snippet

This commit is contained in:
Ilia Mashkov
2026-02-27 12:50:16 +03:00
parent 8fa376ef94
commit 44bbac4695

View File

@@ -14,6 +14,7 @@ import {
import SectionHeader from './SectionHeader/SectionHeader.svelte';
import SectionTitle from './SectionTitle/SectionTitle.svelte';
import type { TitleStatusChangeHandler } from './types';
interface Props extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
/**
@@ -40,23 +41,16 @@ interface Props extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
index?: number;
/**
* Callback function to notify when the title visibility status changes
*
* @param index - Index of the section
* @param isPast - Whether the section is past the current scroll position
* @param title - Snippet for a title itself
* @param id - ID of the section
* @returns Cleanup callback
*/
onTitleStatusChange?: (
index: number,
isPast: boolean,
title?: Snippet<[{ className?: string }]>,
id?: string,
) => () => void;
onTitleStatusChange?: TitleStatusChangeHandler;
/**
* Snippet for the section content
*/
content?: Snippet<[{ className?: string }]>;
/**
* Snippet for the section header content
*/
headerContent?: Snippet<[{ className?: string }]>;
}
const {
@@ -64,11 +58,11 @@ const {
title,
headerTitle,
headerSubtitle,
description,
index = 0,
onTitleStatusChange,
id,
content,
headerContent,
}: Props = $props();
const flyParams: FlyParams = {
@@ -86,11 +80,14 @@ const flyParams: FlyParams = {
in:fly={flyParams}
out:fly={flyParams}
>
<div class="flex flex-col md:flex-row md:items-end justify-between mb-8 md:mb-12 gap-4 md:gap-6">
<div>
{#if headerTitle}
<SectionHeader title={headerTitle} subtitle={headerSubtitle} index={index} />
{/if}
<SectionTitle text={title} />
</div>
{@render headerContent?.({})}
</div>
{@render content?.({})}
</section>