feat: initial commit

2026-04-14 15:28:51 +05:30
parent 83fec22f53
commit 82e720b10a
8267 changed files with 866814 additions and 52 deletions
@@ -0,0 +1,60 @@
+"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>
+  );
+}