feat: sb verses extracted

app/books/extracted-verse-count.tsx

@@ -1,6 +1,11 @@
 "use client";
 
-import { useState, useRef, useEffect } from "react";
+import { Info } from "lucide-react";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 
 const TOOLTIP_TEXT =
   "This is the number of extracted verse entries from Śrīla Prabhupāda's original translations and purports. Some consecutive verses are merged into a single entry (e.g. Texts 16–18), so the actual verse count in the original manuscript may differ.";
@@ -14,47 +19,26 @@ export function ExtractedVerseCount({
   label?: string;
   className?: string;
 }) {
-  const [open, setOpen] = useState(false);
-  const ref = useRef<HTMLSpanElement>(null);
-
-  useEffect(() => {
-    if (!open) return;
-    function handleClick(e: MouseEvent) {
-      if (ref.current && !ref.current.contains(e.target as Node)) {
-        setOpen(false);
-      }
-    }
-    document.addEventListener("mousedown", handleClick);
-    return () => document.removeEventListener("mousedown", handleClick);
-  }, [open]);
-
   return (
-    <span ref={ref} className={`inline-flex items-center gap-1 ${className}`}>
+    <span className={`inline-flex items-center gap-1 ${className}`}>
       <span>
         {count.toLocaleString()} {label}
       </span>
-      <span className="relative inline-flex">
-        <button
-          type="button"
+      <Tooltip>
+        <TooltipTrigger
           onClick={(e) => {
             e.preventDefault();
             e.stopPropagation();
-            setOpen((v) => !v);
           }}
-          onMouseEnter={() => setOpen(true)}
-          onMouseLeave={() => setOpen(false)}
-          className="inline-flex items-center justify-center w-4 h-4 rounded-full border border-current opacity-50 hover:opacity-80 transition-opacity text-[10px] leading-none font-semibold"
+          className="inline-flex items-center justify-center opacity-50 hover:opacity-80 transition-opacity"
           aria-label="About verse count"
         >
-          i
-        </button>
-        {open && (
-          <span className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-64 px-3 py-2 rounded-lg bg-zinc-900 dark:bg-zinc-700 text-white text-xs leading-relaxed shadow-lg z-50 pointer-events-none">
-            {TOOLTIP_TEXT}
-            <span className="absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-zinc-900 dark:border-t-zinc-700" />
-          </span>
-        )}
-      </span>
+          <Info className="size-3.5" />
+        </TooltipTrigger>
+        <TooltipContent side="top" className="max-w-xs text-pretty">
+          {TOOLTIP_TEXT}
+        </TooltipContent>
+      </Tooltip>
     </span>
   );
 }