---
type Props = {
  depth: number;
  slug: string;
  text: string;
  children?: Props[];
};

const { slug, text, children } = Astro.props;
---

<li>
  <a href={`#${slug}`}>{text}</a>
  {
    children?.length ? (
      <ul>
        {children.map((child) => (
          <Astro.self {...child} />
        ))}
      </ul>
    ) : null
  }
</li>
