magicui

1
import { Doc } from "@/.contentlayer/generated";
2
import { buttonVariants } from "@/components/ui/button";
3
import { docsConfig } from "@/config/docs";
4
import { cn } from "@/lib/utils";
5
import { NavItem, NavItemWithChildren } from "@/types";
6
import { ChevronLeftIcon, ChevronRightIcon } from "@radix-ui/react-icons";
7
import Link from "next/link";
8

9
interface DocsPagerProps {
10
  doc: Doc;
11
}
12

13
export function DocPager({ doc }: DocsPagerProps) {
14
  const pager = getPagerForDoc(doc);
15

16
  if (!pager) {
17
    return null;
18
  }
19

20
  return (
21
    <div className="flex flex-row items-center justify-between">
22
      {pager?.prev?.href && (
23
        <Link
24
          href={pager.prev.href}
25
          className={buttonVariants({ variant: "outline" })}
26
        >
27
          <ChevronLeftIcon className="mr-2 h-4 w-4" />
28
          {pager.prev.title}
29
        </Link>
30
      )}
31
      {pager?.next?.href && (
32
        <Link
33
          href={pager.next.href}
34
          className={cn(buttonVariants({ variant: "outline" }), "ml-auto")}
35
        >
36
          {pager.next.title}
37
          <ChevronRightIcon className="ml-2 h-4 w-4" />
38
        </Link>
39
      )}
40
    </div>
41
  );
42
}
43

44
export function getPagerForDoc(doc: Doc) {
45
  const flattenedLinks = [null, ...flatten(docsConfig.sidebarNav), null];
46
  const activeIndex = flattenedLinks.findIndex(
47
    (link) => doc.slug === link?.href,
48
  );
49
  const prev = activeIndex !== 0 ? flattenedLinks[activeIndex - 1] : null;
50
  const next =
51
    activeIndex !== flattenedLinks.length - 1
52
      ? flattenedLinks[activeIndex + 1]
53
      : null;
54
  return {
55
    prev,
56
    next,
57
  };
58
}
59

60
export function flatten(links: NavItemWithChildren[]): NavItem[] {
61
  return links
62
    .reduce<NavItem[]>((flat, link) => {
63
      return flat.concat(link.items?.length ? flatten(link.items) : link);
64
    }, [])
65
    .filter((link) => !link?.disabled);
66
}
67