import Link from 'next/link';
import type { ReactNode } from 'react';
import { cn } from '@/lib/cn';
/** Long-form typography primitives for the meta pages (methodology, about, privacy, terms, developers). Server-safe. */
export function Prose({ children, className }: { children: ReactNode; className?: string }) {
return {children}
;
}
/** Anchored section with a hairline on top; `id` is used by the TOC. */
export function DocSection({ id, eyebrow, title, children, className }: { id: string; eyebrow?: string; title: ReactNode; children: ReactNode; className?: string }) {
return (
{eyebrow && {eyebrow}
}
{children}
);
}
export function SubHeading({ children, id }: { children: ReactNode; id?: string }) {
return (
{children}
);
}
/** Sticky mini table of contents (desktop); a compact inline list on mobile. DOM order = visual order (TOC first on all breakpoints). */
export function Toc({ items, className }: { items: { id: string; label: string }[]; className?: string }) {
return (
);
}
/** Two-column doc layout: TOC (left, sticky on desktop) + content. */
export function DocLayout({ toc, children }: { toc: { id: string; label: string }[]; children: ReactNode }) {
return (
);
}
/** Code block in mono on the secondary plane; horizontal scroll instead of overflow. */
export function Code({ children, className, label }: { children: string; className?: string; label?: string }) {
return (
{label && {label}}
{children}
);
}
/** Definition list rendered as hairline rows (label / value). */
export function KeyValues({ rows, className }: { rows: { k: ReactNode; v: ReactNode }[]; className?: string }) {
return (
{rows.map((r, i) => (
- {r.k}
- {r.v}
))}
);
}
export function Callout({ children, tone = 'info', className }: { children: ReactNode; tone?: 'info' | 'warn'; className?: string }) {
return (
{children}
);
}
export function MethodologyLink({ anchor, children }: { anchor?: string; children?: ReactNode }) {
return (
{children ?? 'Methodology'}
);
}