blog.z0x.ca/src/components/TableOfContentsHeading.astro
2024-10-01 16:02:24 -07:00

26 lines
715 B
Text

---
import Link from './Link.astro'
import type { Heading } from './TableOfContents.astro'
const { heading } = Astro.props
---
<li
class="list-inside list-disc px-4 py-1.5 text-sm text-foreground/60 xl:list-none xl:p-0"
>
<Link
href={'#' + heading.slug}
class="toc-link underline decoration-transparent underline-offset-[3px] transition-colors duration-200 hover:decoration-inherit"
>
{heading.text}
</Link>
{
heading.subheadings.length > 0 && (
<ul class="translate-x-3 xl:ml-4 xl:mt-2 xl:flex xl:translate-x-0 xl:flex-col xl:gap-2">
{heading.subheadings.map((subheading: Heading) => (
<Astro.self heading={subheading} />
))}
</ul>
)
}
</li>