Add basic pages for blog entries

This commit is contained in:
Alexander Navarro 2023-11-11 18:48:50 -03:00
parent a9d4e94580
commit 8ca3b129dc
6 changed files with 97 additions and 2 deletions

View file

@ -0,0 +1,26 @@
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>
);
}