Files
kazoottt-blog-v2/src/components/componentsBefore/blog/TOC.astro
2025-02-07 17:19:02 +08:00

32 lines
650 B
Plaintext

---
import type { MarkdownHeading } from "astro";
import { generateToc } from "@/utils";
import TOCHeading from "./TOCHeading.astro";
interface Props {
headings: MarkdownHeading[];
}
const { headings } = Astro.props;
const toc = generateToc(headings);
---
<aside
class="sticky top-20 order-2 -me-28 hidden h-[calc(100vh-6rem)] basis-60 lg:flex lg:flex-col"
>
{
toc.length > 0 && (
<>
<h2 class="mb-4 font-semibold">TABLE OF CONTENTS</h2>
<ul class="text-card-foreground max-h-[calc(100vh-10rem)] overflow-y-auto pr-4">
{toc.map((heading) => (
<TOCHeading heading={heading} />
))}
</ul>
</>
)
}
</aside>