TOC Minimap

1"use client"
2 
3import { useEffect, useMemo, useState } from "react"
4 
5import { uMiniMapOpenSound } from "@/lib/soundcn/u-mini-map-open"
6import { cn } from "@/lib/utils"
7import { useSound } from "@/hooks/soundcn/use-sound"
8import {
9  HoverCard,
10  HoverCardContent,
11  HoverCardTrigger,
12} from "@/components/ui/hover-card"
13 
14export type TOCItemType = {
15  title: React.ReactNode
16  url: string
17  depth: number
18}
19 
20export type TOCMinimapProps = {
21  /** @fumadocsHref #tocitemtype */
22  items: TOCItemType[]
23  className?: string
24}
25 
26export function TOCMinimap({ items, className }: TOCMinimapProps) {
27  const itemIds = useMemo(
28    () => items.map((item) => item.url.replace("#", "")),
29    [items]
30  )
31 
32  const activeHeading = useActiveHeading(itemIds)
33 
34  const [play] = useSound(uMiniMapOpenSound, { volume: 0.3 })
35 
36  if (!items.length) {
37    return null
38  }
39 
40  return (
41    <div className={cn("ml-auto w-18", className)}>
42      <HoverCard
43        openDelay={0}
44        closeDelay={0}
45        onOpenChange={(open) => {
46          if (open) play()
47        }}
48      >
49        <HoverCardTrigger asChild>
50          <div className="flex max-h-[50dvh] flex-col gap-3 overflow-hidden py-3 pl-6 opacity-100 transition-opacity duration-200 data-popup-open:opacity-0">
51            {items.map((item) => (
52              <div
53                key={item.url}
54                data-depth={item.depth}
55                data-active={item.url === `#${activeHeading}`}
56                className={cn(
57                  "h-0.5 w-6 shrink-0 rounded-xs bg-ring/50 transition-[background-color] duration-200",
58                  "data-[depth=3]:ml-2 data-[depth=3]:w-4",
59                  "data-[depth=4]:ml-4 data-[depth=4]:w-2",
60                  "data-active:bg-foreground"
61                )}
62              />
63            ))}
64          </div>
65        </HoverCardTrigger>
66 
67        <HoverCardContent
68          className="w-56 overflow-hidden p-0 duration-200 data-[side=left]:slide-in-from-right-3 data-[side=left]:slide-out-to-right-3 data-open:zoom-in-100 data-closed:zoom-out-100"
69          align="start"
70          alignOffset={0}
71          side="left"
72          sideOffset={-60}
73        >
74          <div className="flex max-h-[50dvh] overflow-y-auto overscroll-contain">
75            <ul className="flex size-full flex-col px-6 py-4 text-sm">
76              {items.map((item) => (
77                <li key={item.url} className="flex py-1">
78                  <a
79                    href={item.url}
80// … truncated