TOC

1 import { Toc, TocItem, TocList } from "@/components/ui/toc";2 3 const items = [4   { title: "Getting Started", href: "#getting-started", depth: 2, active: true },5   { title: "Installation", href: "#installation", depth: 3, active: false },6   { title: "pnpm", href: "#pnpm", depth: 4, active: false },7   { title: "Provider Setup", href: "#provider-setup", depth: 3, active: false },8   { title: "Advanced Usage", href: "#advanced-usage", depth: 2, active: false },9 ];10 11 export default function TocDepth() {12   return (13     <Toc title="On this page" className="w-full max-w-xs">14       <TocList>15         {items.map((item) => (16           <TocItem key={item.href} href={item.href} depth={item.depth} active={item.active}>17             {item.title}18           </TocItem>19         ))}20       </TocList>21     </Toc>22   );23 }24 

1 "use client";2 3 import { useId } from "react";4 import { Toc, TocItem, TocList } from "@/components/ui/toc";5 import { useActiveHeading } from "@/hooks/use-active-heading";6 7 const sections = [8   { id: "overview", title: "Overview", depth: 2 },9   { id: "installation", title: "Installation", depth: 2 },10   { id: "npm", title: "npm", depth: 3 },11   { id: "pnpm", title: "pnpm", depth: 3 },12   { id: "usage", title: "Usage", depth: 2 },13 ] as const;14 15 const headingByDepth = {16   2: "h2",17   3: "h3",18 } as const;19 20 export default function TocActive() {21   // useActiveHeading resolves headings with document.getElementById, which22   // returns the first match in the whole page. Bare slugs like "installation"23   // would resolve to the host page's own anchor instead of this demo's heading,24   // so every id here is namespaced per instance.25   const uid = useId();26   const headingId = (id: string) => `${uid}-${id}`;27   const ids = sections.map((s) => headingId(s.id));28   // The content lives in a fixed-height scroll container, so the marker starts29   // on the heading the reader can actually see and moves as that pane scrolls.30   const containerId = `${uid}-pane`;31   const { activeId, scrollTo } = useActiveHeading({ ids, containerId, topOffset: 24 });32 33   return (34     <div className="flex flex-col gap-6 sm:flex-row sm:gap-8">35       <Toc title="On this page" className="w-full sm:max-w-xs sm:shrink-0">36         <TocList>37           {sections.map((section) => (38             <TocItem39               key={section.id}40               href={`#${headingId(section.id)}`}41               depth={section.depth}42               active={activeId === headingId(section.id)}43               onClick={(e) => {44                 e.preventDefault();45                 scrollTo(headingId(section.id));46               }}47             >48               {section.title}49             </TocItem>50           ))}51         </TocList>52       </Toc>53 54       <div55         id={containerId}56         className="h-64 min-w-0 flex-1 overflow-y-auto border border-border p-4"57       >58         <div className="flex flex-col gap-16 pb-40">59           {sections.map((section) => {60             const Heading = headingByDepth[section.depth];61             return (62               <section key={section.id}>63                 <Heading64                   id={headingId(section.id)}65                   className="mb-4 text-lg font-medium text-foreground"66                 >67                   {section.title}68                 </Heading>69                 <p className="text-sm text-muted-foreground">70                   Content for the {section.title.toLowerCase()} section. Scroll this pane to see the71                   active heading update in the list.72                 </p>73               </section>74             );75           })}76         </div>77       </div>78     </div>79   );80 }81