26 lines
741 B
TypeScript
26 lines
741 B
TypeScript
import React from 'react';
|
|
import type { MarkdownHeading } from 'astro';
|
|
// import styles from './Toc.module.css';
|
|
|
|
interface Props {
|
|
headings: MarkdownHeading[];
|
|
}
|
|
|
|
// TODO: Change this for the floating container with Intersection Observer
|
|
// FIXME: Create real nesting and not the ilussion of nesting (aka nested ul and not padding multiplied by depth)
|
|
export default function Toc({ headings }: Props): JSX.Element {
|
|
return (
|
|
<ul className="mb-3">
|
|
{headings.map((item, idx) => (
|
|
<li
|
|
key={idx}
|
|
style={{ paddingLeft: item.depth > 1 ? 20 * item.depth : 0 }}
|
|
>
|
|
<a href={`#${item.slug}`}>
|
|
{item.depth} - {item.text}
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
);
|
|
}
|