Inline Table of Content

import { TableOfContents } from "@/components/ui/inline-toc"

function TableOfContentsDemo() {
  return (
    <div className="flex min-h-[350px] w-full items-start bg-transparent p-4">
      <div className="w-[400px]">
        <TableOfContents
          items={[
            { title: "Introduction", url: "#introduction", depth: 1 },
            { title: "Getting Started", url: "#getting-started", depth: 2 },
            { title: "Installation", url: "#installation", depth: 3 },
            { title: "Configuration", url: "#configuration", depth: 3 },
            { title: "Usage", url: "#usage", depth: 2 },
            { title: "Examples", url: "#examples", depth: 2 },
            { title: "API Reference", url: "#api", depth: 1 },
          ]}
          className="w-full"
        />
      </div>
    </div>
  )
}

export { TableOfContentsDemo }