Dokploy/website
1
0
Fork 0
mirror of https://github.com/Dokploy/website synced 2025-06-26 18:16:01 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: add fallback state for empty table of contents

Browse Source
This commit is contained in:
Mauricio Siu 2025-03-02 21:39:13 -06:00
parent c89a28f0f5
commit f385829bb7
1 changed files with 30 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
apps/website/app/[locale]/blog/[slug]/components/TableOfContents.tsx
View File

@ -47,29 +47,37 @@ export function TableOfContents() {
<nav className="space-y-2 text-sm">
<p className="font-medium mb-4">Table of Contents</p>
<ul className="space-y-2">
{headings.map((heading) => (
<li
key={heading.id}
style={{ paddingLeft: `${(heading.level - 1) * 1}rem` }}
>
<a
href={`#${heading.id}`}
onClick={(e) => {
e.preventDefault();
document.getElementById(heading.id)?.scrollIntoView({
behavior: "smooth",
});
}}
className={`hover:text-primary transition-colors block ${
activeId === heading.id
? "text-primary font-medium"
: "text-muted-foreground"
}`}
>
{heading.text}
</a>
{headings.length > 0 ? (
<>
{headings.map((heading) => (
<li
key={heading.id}
style={{ paddingLeft: `${(heading.level - 1) * 1}rem` }}
>
<a
href={`#${heading.id}`}
onClick={(e) => {
e.preventDefault();
document.getElementById(heading.id)?.scrollIntoView({
behavior: "smooth",
});
}}
className={`hover:text-primary transition-colors block ${
activeId === heading.id
? "text-primary font-medium"
: "text-muted-foreground"
}`}
>
{heading.text}
</a>
</li>
))}
</>
) : (
<li>
<p className="text-muted-foreground">No headings found</p>
</li>
))}
)}
</ul>
</nav>
);