Shadcn Table of Contents for React Radix UI

import { useCallback, useRef } from "react";
import {
  Toc,
  TocContent,
  TocIndicator,
  TocItem,
  TocLink,
  TocList,
  TocNav,
  TocTitle,
} from "@/components/ui/toc";

interface Item {
  depth: number;
  label: string;
  lines: number;
  value: string;
}

const items: Item[] = [
  {
    depth: 2,
    label: "Introduction",
    lines: 8,
    value: "toc-basic-introduction",
  },
  {
    depth: 2,
    label: "Getting Started",
    lines: 7,
    value: "toc-basic-getting-started",
  },
  {
    depth: 2,
    label: "Installation",
    lines: 6,
    value: "toc-basic-installation",
  },
  { depth: 2, label: "Usage", lines: 9, value: "toc-basic-usage" },
  { depth: 2, label: "Conclusion", lines: 7, value: "toc-basic-conclusion" },
];

const TocDemo = () => {
  const contentRef = useRef<HTMLElement | null>(null);
  const getScrollEl = useCallback(() => contentRef.current, []);

  return (
    <Toc className="max-w-2xl" items={items} scrollEl={getScrollEl}>
      <TocContent className="h-80 pe-2" ref={contentRef}>
        {items.map((item) => (
          <section
            className="not-first:mt-12 flex flex-col gap-3"
            key={item.value}
          >
            <h2
              className="scroll-mt-4 font-heading font-semibold text-lg"
              id={item.value}
            >
              {item.label}
            </h2>
            <div
              className="rounded-md bg-muted"
              style={{ height: `${item.lines * 0.75}rem` }}
            />
          </section>
        ))}
      </TocContent>

      <TocNav scrollToTop>
        <TocTitle>On this page</TocTitle>
        <TocList>
          <TocIndicator />
          {items.map((item) => (
            <TocItem item={item} key={item.value}>
              <TocLink href={`#${item.value}`}>{item.label}</TocLink>
            </TocItem>
          ))}
        </TocList>
      </TocNav>
    </Toc>
  );
};