The contents of a page, in both forms

// apps/docs/examples/ui/table-of-contents.tsx'use client';
import {TableOfContents} from '@workspace/active-ui/components/composed/table-of-contents';
const ITEMS = [  {id: 'toc-example-keys', text: 'Keys', depth: 2},  {id: 'toc-example-plurals', text: 'Plurals', depth: 2},  {id: 'toc-example-zero', text: 'Zero and one', depth: 3},  {id: 'toc-example-missing', text: 'Missing keys', depth: 2},];
/** * The contents of a page in its two forms: the list beside the content, and * the collapsible form above it on a narrow screen. The section in view is * marked as the reader scrolls past the headings of this example. */export default function TableOfContentsExample() {  return (    <div className="grid w-full gap-8 sm:grid-cols-[1fr_14rem]">      <div className="flex flex-col gap-6 text-sm">        {ITEMS.map((item) => (          <section key={item.id} className="flex flex-col gap-1">            {item.depth === 2 ? (              <h3 id={item.id} className="font-medium">                {item.text}              </h3>            ) : (              <h4 id={item.id} className="font-medium">                {item.text}              </h4>            )}            <p className="text-muted-foreground">              A section of the page. Scroll past it, and the list marks the              section you are in.            </p>          </section>        ))}        <TableOfContents          items={ITEMS}          label="On this page"          variant="collapsible"          className="border-border border-y"        />      </div>      <TableOfContents items={ITEMS} label="Contents" />    </div>  );}