61 lines
2.1 KiB
TypeScript
61 lines
2.1 KiB
TypeScript
"use client";
|
||
|
||
import { useState, useRef, useEffect } from "react";
|
||
|
||
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.";
|
||
|
||
export function ExtractedVerseCount({
|
||
count,
|
||
label = "verses",
|
||
className = "",
|
||
}: {
|
||
count: number;
|
||
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>
|
||
{count.toLocaleString()} {label}
|
||
</span>
|
||
<span className="relative inline-flex">
|
||
<button
|
||
type="button"
|
||
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"
|
||
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>
|
||
</span>
|
||
);
|
||
}
|