export const layout = "./base.tsx";

export default function({ children, toc }) {
  return (
    <>
      { toc.length > 0 &&
        <nav className="toc">
          <h2>Table of Contents</h2>
          <ol>
            {toc.map(item => (
              <li>
                <a href={`#${item.slug}`}>{item.text}</a>
                {item.children.length > 0 &&
                  <ul>
                    {item.children.map(child => (
                      <li>
                        <a href={`#${child.slug}`}>{child.text}</a>
                      </li>
                    ))}
                  </ul>
                }
              </li>
            ))}
          </ol>
        </nav>
      }
      <article>
        { children }
      </article>
    </>
  );
}