magicui

1
"use client";
2

3
import { TableOfContents } from "@/lib/toc";
4
import { useMounted } from "@/lib/use-mounted";
5
import { cn } from "@/lib/utils";
6
import { useEffect, useMemo, useState } from "react";
7

8
interface TocProps {
9
  toc: TableOfContents;
10
}
11

12
export function DashboardTableOfContents({ toc }: TocProps) {
13
  const itemIds: string[] = useMemo(
14
    () =>
15
      toc.items
16
        ? toc.items
17
            .flatMap((item) => [item.url, item?.items?.map((item) => item.url)])
18
            .flat()
19
            .filter(Boolean)
20
            .map((id) => id?.split("#")[1])
21
        : [],
22
    [toc],
23
  ) as string[];
24

25
  const activeHeading = useActiveItem(itemIds);
26
  const mounted = useMounted();
27

28
  if (!toc?.items || !mounted) {
29
    return null;
30
  }
31

32
  return (
33
    <div className="space-y-2">
34
      <p className="font-medium">On This Page</p>
35
      <Tree tree={toc} activeItem={activeHeading} />
36
    </div>
37
  );
38
}
39

40
function useActiveItem(itemIds: string[]): string | null {
41
  const [activeId, setActiveId] = useState<string | null>(null);
42

43
  useEffect(() => {
44
    const observer = new IntersectionObserver(
45
      (entries) => {
46
        entries.forEach((entry) => {
47
          if (entry.isIntersecting) {
48
            setActiveId(entry.target.id);
49
          }
50
        });
51
      },
52
      { rootMargin: `0% 0% -80% 0%` },
53
    );
54

55
    itemIds?.forEach((id) => {
56
      const element = document.getElementById(id);
57
      if (element) {
58
        observer.observe(element);
59
      }
60
    });
61

62
    return () => {
63
      itemIds?.forEach((id) => {
64
        const element = document.getElementById(id);
65
        if (element) {
66
          observer.unobserve(element);
67
        }
68
      });
69
    };
70
  }, [itemIds]);
71

72
  return activeId;
73
}
74

75
interface TreeProps {
76
  tree: TableOfContents;
77
  level?: number;
78
  activeItem?: string | null;
79
}
80

81
function Tree({ tree, level = 1, activeItem }: TreeProps) {
82
  return tree?.items?.length && level < 3 ? (
83
    <ul className={cn("m-0 list-none", { "pl-4": level !== 1 })}>
84
      {tree.items.map((item, index) => {
85
        return (
86
          <li key={index} className={cn("mt-0 pt-2")}>
87
            <a
88
              href={item.url}
89
              className={cn(
90
                "inline-block no-underline transition-colors hover:text-foreground",
91
                item.url === `#${activeItem}`
92
                  ? "font-medium text-foreground"
93
                  : "text-muted-foreground",
94
              )}
95
            >
96
              {item.title}
97
            </a>
98
            {item.items?.length ? (
99
              <Tree tree={item} level={level + 1} activeItem={activeItem} />
100
            ) : null}
101
          </li>
102
        );
103
      })}
104
    </ul>
105
  ) : null;
106
}
107