49 lines
1.7 KiB
TypeScript
49 lines
1.7 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
|
|
type Heading = {
|
|
id: string;
|
|
text: string;
|
|
level: number;
|
|
};
|
|
|
|
export function MobileTableOfContents({ headings }: { headings: Heading[] }) {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
|
|
if (headings.length === 0) return null;
|
|
|
|
return (
|
|
<div className="block xl:hidden mb-8 border border-zinc-200 dark:border-zinc-800 rounded-lg overflow-hidden">
|
|
<button
|
|
onClick={() => setIsOpen(!isOpen)}
|
|
className="w-full flex items-center justify-between p-4 bg-zinc-50 dark:bg-zinc-900 text-sm font-medium text-zinc-900 dark:text-zinc-100"
|
|
>
|
|
<span>Table of Contents</span>
|
|
<span className={`transform transition-transform ${isOpen ? 'rotate-180' : ''}`}>
|
|
▼
|
|
</span>
|
|
</button>
|
|
|
|
{isOpen && (
|
|
<ul className="p-4 bg-white dark:bg-black border-t border-zinc-200 dark:border-zinc-800 space-y-3">
|
|
{headings.map((heading) => (
|
|
<li
|
|
key={heading.id}
|
|
style={{ paddingLeft: `${(heading.level - 2) * 12}px` }}
|
|
>
|
|
<a
|
|
href={`#${heading.id}`}
|
|
onClick={() => setIsOpen(false)}
|
|
className="block text-sm text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-100 truncate"
|
|
>
|
|
{heading.text}
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|