GKaszewski/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: polish TableOfContents — initial state, Tailwind indent, aria-current

Browse Source
This commit is contained in:
Gabriel Kaszewski
2026-03-31 02:28:54 +02:00
parent c0229f28a9
commit 4b8533f9be
1 changed files with 3 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
components/table-of-contents.tsx
View File

@@ -8,7 +8,7 @@ interface TableOfContentsProps {
} }
export default function TableOfContents({ headings }: TableOfContentsProps) { export default function TableOfContents({ headings }: TableOfContentsProps) {
const [activeSlug, setActiveSlug] = useState(""); const [activeSlug, setActiveSlug] = useState(() => headings[0]?.slug ?? "");
useEffect(() => { useEffect(() => {
if (headings.length === 0) return; if (headings.length === 0) return;
@@ -43,10 +43,11 @@ export default function TableOfContents({ headings }: TableOfContentsProps) {
{headings.map(({ slug, text, level }) => ( {headings.map(({ slug, text, level }) => (
<li <li
key={slug} key={slug}
style={{ paddingLeft: level === 3 ? "0.75rem" : "0" }} className={level === 3 ? "pl-3" : ""}
> >
<a <a
href={`#${slug}`} href={`#${slug}`}
aria-current={activeSlug === slug ? "true" : undefined}
className={`text-sm leading-snug transition-colors duration-150 ${ className={`text-sm leading-snug transition-colors duration-150 ${
activeSlug === slug activeSlug === slug
? "text-blue-700 font-semibold" ? "text-blue-700 font-semibold"