44 lines
1.0 KiB
Svelte
44 lines
1.0 KiB
Svelte
|
<!--
|
||
|
|
Component: SectionHeader
|
||
|
|
Numbered section heading with optional subtitle and pulse dot.
|
||
|
|
-->
|
||
|
|
<script lang="ts">
|
||
|
|
import { cn } from '$shared/shadcn/utils/shadcn-utils';
|
||
|
|
import { Label } from '$shared/ui';
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
index: string | number;
|
||
|
|
title: string;
|
||
|
|
subtitle?: string;
|
||
|
|
pulse?: boolean;
|
||
|
|
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-[0.625rem] hidden md:inline">/</span>
|
||
|
|
<Label variant="muted" size="sm">{subtitle}</Label>
|
||
|
|
{/if}
|
||
|
|
</div>
|