feat(Section) add headerContent snippet
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user