---
import BaseLayout from '../../layouts/BaseLayout.astro'

import Header from '../../components/Header.astro'
import Footer from '../../components/Footer.astro'

import CodeBlockPreview from '../../components/meta/CodeBlockPreview.astro'

import { Content, getHeadings } from '../../content/meta/design.mdx'

const headings = getHeadings()
---

<BaseLayout {...Astro.props} pageTags="design">
    <Header />
    <aside>
        <nav>
            <h3>Indice</h3>
            <ul>
                {
                    headings.map(heading => (
                        <li style={{ '--depth': heading.depth }}>
                            <a href={`#${heading.slug}`}>{heading.text}</a>
                        </li>
                    ))
                }
            </ul>
        </nav>
    </aside>
    <main class="text">
        <Content components={{ pre: CodeBlockPreview }} />
    </main>
    <Footer />
</BaseLayout>