feat: add fallback state for empty table of contents

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

@@ -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) => (
+				{headings.length > 0 ? (
-					<li
+					<>
-						key={heading.id}
+						{headings.map((heading) => (
-						style={{ paddingLeft: `${(heading.level - 1) * 1}rem` }}
+							<li
-					>
+								key={heading.id}
-						<a
+								style={{ paddingLeft: `${(heading.level - 1) * 1}rem` }}
-							href={`#${heading.id}`}
+							>
-							onClick={(e) => {
+								<a
-								e.preventDefault();
+									href={`#${heading.id}`}
-								document.getElementById(heading.id)?.scrollIntoView({
+									onClick={(e) => {
-									behavior: "smooth",
+										e.preventDefault();
-								});
+										document.getElementById(heading.id)?.scrollIntoView({
-							}}
+											behavior: "smooth",
-							className={`hover:text-primary transition-colors block ${
+										});
-								activeId === heading.id
+									}}
-									? "text-primary font-medium"
+									className={`hover:text-primary transition-colors block ${
-									: "text-muted-foreground"
+										activeId === heading.id
-							}`}
+											? "text-primary font-medium"
-						>
+											: "text-muted-foreground"
-							{heading.text}
+									}`}
-						</a>
+								>
+									{heading.text}
+								</a>
+							</li>
+						))}
+					</>
+				) : (
+					<li>
+						<p className="text-muted-foreground">No headings found</p>
 					</li>
-				))}
+				)}
 			</ul>
 		</nav>
 	);