Table of Contents

npx shadcn@latest add https://blocks.aiskillhub.info/api/registry/table-of-contents

"use client";
const headings = [
  { id: "intro", text: "Introduction", level: 2 },
  { id: "setup", text: "Setup", level: 2 },
  { id: "config", text: "Configuration", level: 3 },
  { id: "deploy", text: "Deploying", level: 2 },
];

export function TableOfContents({ active = "setup" }: { active?: string }) {
  return (
    <nav className="space-y-1 border-l border-border pl-3 text-sm">
      <p className="mb-2 text-xs font-semibold uppercase tracking-wide text-muted">On this page</p>
      {headings.map((h) => (
        <a key={h.id} href={`#${h.id}`}
          className={`block py-0.5 ${h.level === 3 ? "pl-3" : ""} ${h.id === active ? "font-medium text-primary" : "text-muted hover:text-foreground"}`}>
          {h.text}
        </a>
      ))}
    </nav>
  );
}