frontend-svelte/src/shared/ui/Section/Section.svelte

<!--
    Component: Section
    Provides a container for a page widget with snippets for a title
-->
<script lang="ts">
import { cn } from '$shared/shadcn/utils/shadcn-utils';
import type { Snippet } from 'svelte';
import { cubicOut } from 'svelte/easing';
import type { HTMLAttributes } from 'svelte/elements';
import {
    type FlyParams,
    fly,
} from 'svelte/transition';

import SectionHeader from './SectionHeader/SectionHeader.svelte';
import SectionTitle from './SectionTitle/SectionTitle.svelte';

interface Props extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
    /**
     * ID of the section
     */
    id?: string;
    /**
     * Additional CSS classes to apply to the section container.
     */
    class?: string;
    /**
     * Title of the section
     */
    title: string;
    /**
     * Snippet for a title description
     */
    description?: Snippet<[{ className?: string }]>;
    headerTitle?: string;
    headerSubtitle?: string;
    /**
     * Index of the section
     */
    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;
    /**
     * Snippet for the section content
     */
    content?: Snippet<[{ className?: string }]>;
}

const {
    class: className,
    title,
    headerTitle,
    headerSubtitle,
    description,
    index = 0,
    onTitleStatusChange,
    id,
    content,
}: Props = $props();

const flyParams: FlyParams = {
    y: 0,
    x: -50,
    duration: 300,
    easing: cubicOut,
    opacity: 0.2,
};
</script>

<section
    {id}
    class="w-full max-w-7xl mx-auto px-4 md:px-6 pb-32 md:pb-48"
    in:fly={flyParams}
    out:fly={flyParams}
>
    <div>
        {#if headerTitle}
            <SectionHeader title={headerTitle} subtitle={headerSubtitle} index={index} />
        {/if}
        <SectionTitle text={title} />
    </div>
    {@render content?.({})}
</section>