site/src/components/TableOfContents.astro

---
import type { MarkdownHeading } from 'astro'
import { generateToc, type TocEntry } from '@libs/toc'

interface Props {
  headings?: MarkdownHeading[]
  entries?: TocEntry[]
}

const { entries, headings } = Astro.props

const toc = entries ? entries : generateToc(headings ?? [])
---

<ul class="nav flex-column">
  {
    toc.map(({ children, slug, text }) => {
      return (
        <li>
          <a class="nav-link" href={`#${slug}`}>
            {text}
          </a>
          {children.length > 0 && <Astro.self entries={children} />}
        </li>
      )
    })
  }
</ul>