33 lines
1.0 KiB
TypeScript
33 lines
1.0 KiB
TypeScript
type Heading = {
|
|
id: string;
|
|
text: string;
|
|
level: number;
|
|
};
|
|
|
|
export function MobileTableOfContents({ headings }: { headings: Heading[] }) {
|
|
if (headings.length === 0) return null;
|
|
|
|
return (
|
|
<details className="mb-8 border-y border-line py-4">
|
|
<summary className="eyebrow cursor-pointer list-none">
|
|
Contents
|
|
</summary>
|
|
<ul className="mt-4 space-y-2">
|
|
{headings.map((heading) => (
|
|
<li
|
|
key={heading.id}
|
|
style={{ paddingLeft: `${(heading.level - 2) * 12}px` }}
|
|
>
|
|
<a
|
|
href={`#${heading.id}`}
|
|
className="block text-[0.94rem] leading-7 text-muted transition-colors hover:text-ink"
|
|
>
|
|
{heading.text}
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</details>
|
|
);
|
|
}
|