47 lines
993 B
Plaintext
47 lines
993 B
Plaintext
---
|
|
import type { TableOfContentEntry } from "src/shared/payload/payload-sdk";
|
|
import TableOfContentItem from "./components/TableOfContentItem.astro";
|
|
import { Icon } from "astro-icon/components";
|
|
|
|
interface Props {
|
|
toc: TableOfContentEntry[];
|
|
}
|
|
|
|
const { toc } = Astro.props;
|
|
---
|
|
|
|
{
|
|
/* ------------------------------------------- HTML ------------------------------------------- */
|
|
}
|
|
|
|
<div id="container">
|
|
<div id="title">
|
|
<Icon name="material-symbols:list-alt-outline" width={24} height={24} />
|
|
<p>Table of Content</p>
|
|
</div>
|
|
<ol>
|
|
{toc.map((entry) => <TableOfContentItem entry={entry} />)}
|
|
</ol>
|
|
</div>
|
|
|
|
{
|
|
/* ------------------------------------------- CSS -------------------------------------------- */
|
|
}
|
|
|
|
<style>
|
|
#container {
|
|
& > #title {
|
|
display: flex;
|
|
place-items: center;
|
|
gap: 8px;
|
|
margin-bottom: 0.75em;
|
|
|
|
& > p {
|
|
font-size: 1.5em;
|
|
font-weight: 600;
|
|
translate: 0px -0.1em;
|
|
}
|
|
}
|
|
}
|
|
</style>
|