basecoat/docs/_includes/layouts/component.njk

---
layout: layouts/base.njk
---

<main class="mx-auto relative py-6 lg:gap-10 lg:py-8 flex w-full max-w-screen-lg">
  <div class="mx-auto w-full min-w-0 max-w-screen-md">
    <header class="space-y-2">
      <h1 class="text-3xl font-semibold tracking-tight">{{ title }}</h1>
      <p class="text-muted-foreground">{{ description }}</p>
    </header>
    <article class="pb-12 pt-8 [&>h2]:mt-16 [&>h2]:scroll-m-22 [&>h2]:border-b [&>h2]:pb-4 [&>h2]:text-xl [&>h2]:font-semibold [&>h2]:tracking-tight [&>h2]:first:mt-0 [&>h3]:font-heading [&>h3]:mt-8 [&>h3]:scroll-m-22 [&>h3]:text-lg [&>h3]:font-semibold [&>h3]:tracking-tight">
      {{ content | safe }}
    </article>
  </div>
  <div class="hidden text-sm xl:block w-full max-w-[300px]">
    <nav class="sticky top-22 space-y-2 [&_ul]:m-0 [&_ul]:list-none [&_ul_ul]:pl-4 [&_li]:mt-0 [&_li]:pt-2 [&_a]:inline-block [&_a]:no-underline [&_a]:transition-colors [&_a]:hover:text-foreground [&_a]:text-muted-foreground">
      <h4 class="font-medium">On This Page</h4>
      {% if toc %}
        {% macro renderToc(items) %}
          {% if items and items.length %}
            <ul>
            {% for item in items %}
              <li>
                <a href="#{{ item.id }}">{{ item.label }}</a>
                {% if item.children and item.children.length %}
                  {{ renderToc(item.children) }}
                {% endif %}
              </li>
            {% endfor %}
            </ul>
          {% endif %}
        {% endmacro %}
        {{ renderToc(toc) }}
      {% else %}
        <p class="text-muted-foreground text-center bg-muted rounded-md p-2">No table of contents.</p>
      {% endif %}
    </nav>
  </div>
</main>