Files

29 lines
749 B
TypeScript

/**
* Magazine spread numbering — "01 / 05" with an eyebrow label.
* Sits in the corner of a section per editorial convention.
*
* CUSTOMIZATION HOOK — CONTENT: index / total / label.
*/
export default function SectionLabel({
index,
total = 5,
label,
className = "",
}: {
index: number;
total?: number;
label: string;
className?: string;
}) {
const pad = (n: number) => String(n).padStart(2, "0");
return (
<div className={`flex items-center gap-3 ${className}`}>
<span className="corner-label">
{pad(index)} <span className="text-ink-mute/50">/</span> {pad(total)}
</span>
<span className="h-px w-8 bg-ink/40" aria-hidden />
<span className="kicker">{label}</span>
</div>
);
}