Table of Contents

"use client";

import { TableOfContents } from "@/components/ui/table-of-contents";

const items = [
  { id: "introduction", title: "Introduction", level: 1 },
  { id: "installation", title: "Installation", level: 1 },
  { id: "install-npm", title: "npm", level: 2 },
  { id: "install-yarn", title: "yarn", level: 2 },
  { id: "usage", title: "Usage", level: 1 },
  { id: "usage-basic", title: "Basic example", level: 2 },
  { id: "usage-advanced", title: "Advanced example", level: 2 },
  { id: "api", title: "API Reference", level: 1 },
];

export default function TableOfContentsDemo() {
  return (
    <div className="flex w-full items-center justify-center bg-background p-10">
      <div className="w-full max-w-xs rounded-xl border border-border bg-card p-6 shadow-sm">
        <TableOfContents items={items} />
      </div>
    </div>
  );
}