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

<!--
    Component: SectionHeader
    Numbered section heading with optional subtitle and pulse dot.
-->
<script lang="ts">
import { cn } from '$shared/lib';
import { Label } from '$shared/ui';

interface Props {
    /**
     * Section index
     */
    index: string | number;
    /**
     * Section title
     */
    title: string;
    /**
     * Section subtitle
     */
    subtitle?: string;
    /**
     * Pulse animation
     * @default false
     */
    pulse?: boolean;
    /**
     * CSS classes
     */
    class?: string;
}

let {
    index,
    title,
    subtitle,
    pulse = false,
    class: className,
}: Props = $props();

const indexStr = $derived(String(index).padStart(2, '0'));
</script>

<div class={cn('flex items-center gap-3 md:gap-4 mb-2', className)}>
    <div class="flex items-center gap-2">
        {#if pulse}
            <span class="w-1.5 h-1.5 bg-brand rounded-full animate-pulse"></span>
        {/if}

        <Label variant="accent" size="sm" bold>
            {indexStr} // {title}
        </Label>
    </div>

    {#if subtitle}
        <span class="text-neutral-300 dark:text-neutral-700 text-2xs hidden md:inline">/</span>
        <Label variant="muted" size="sm">{subtitle}</Label>
    {/if}
</div>