Webserver/components/mdx/MobileTableOfContents.tsx

type Heading = {
    id: string;
    text: string;
    level: number;
};

export function MobileTableOfContents({ headings }: { headings: Heading[] }) {
    if (headings.length === 0) return null;

    return (
        <details className="group mb-8 border-y border-line py-4">
            <summary className="flex cursor-pointer list-none items-center justify-between gap-4">
                <span className="eyebrow">Contents</span>
                <span aria-hidden className="text-base leading-none text-muted-strong transition-transform group-open:rotate-45">
                    +
                </span>
            </summary>
            <ul className="mt-4 space-y-2">
                {headings.map((heading) => (
                    <li key={heading.id} className={heading.level > 2 ? 'pl-4' : undefined}>
                        <a
                            href={`#${heading.id}`}
                            className="block text-[0.94rem] leading-7 text-muted transition-colors hover:text-ink"
                        >
                            {heading.text}
                        </a>
                    </li>
                ))}
            </ul>
        </details>
    );
}