feat: disciple highlight

2026-08-07 22:47:04 +05:30
parent 1984797ad3
commit 274c735b4d
13 changed files with 348 additions and 64 deletions
@@ -0,0 +1,89 @@
+"use client";
+
+/**
+ * DiscipleBadge — the small circular Śrīla Prabhupāda portrait that marks a
+ * profile as belonging to one of his own initiated disciples.
+ *
+ * Positioned by the caller (the profile header overlaps it on the avatar's
+ * lower-right, like a verification tick). Tapping it toggles a tooltip reading
+ * "Śrīla Prabhupāda's Direct Disciple" — click rather than hover, so it works
+ * identically on touch, where there is no hover state.
+ *
+ * The tooltip closes on a second tap, on Escape, or on any outside click.
+ */
+
+import { useEffect, useRef, useState } from "react";
+import Image from "next/image";
+import { cn } from "@/lib/utils";
+
+const LABEL = "Śrīla Prabhupāda's Direct Disciple";
+
+export function DiscipleBadge({ className }: { className?: string }) {
+  const [open, setOpen] = useState(false);
+  const wrapRef = useRef<HTMLSpanElement>(null);
+
+  // Dismiss on outside click / Escape. Bound only while open so we don't keep
+  // document-level listeners around for every profile view.
+  useEffect(() => {
+    if (!open) return;
+    function onPointerDown(e: PointerEvent) {
+      if (!wrapRef.current?.contains(e.target as Node)) setOpen(false);
+    }
+    function onKey(e: KeyboardEvent) {
+      if (e.key === "Escape") setOpen(false);
+    }
+    document.addEventListener("pointerdown", onPointerDown);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("pointerdown", onPointerDown);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+
+  return (
+    <span ref={wrapRef} className={cn("relative inline-flex", className)}>
+      <button
+        type="button"
+        onClick={() => setOpen((v) => !v)}
+        aria-label={LABEL}
+        aria-expanded={open}
+        // Native tooltip as a desktop-hover bonus; the popover below is the
+        // real (touch-friendly) affordance.
+        title={LABEL}
+        className={cn(
+          "size-8 sm:size-9 overflow-hidden rounded-full",
+          "bg-card ring-2 ring-card shadow-md",
+          "transition-transform hover:scale-105 active:scale-95",
+          "outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        )}
+      >
+        <Image
+          src="/images/prabhupada-disciple-badge.png"
+          alt=""
+          width={72}
+          height={72}
+          className="size-full object-cover"
+        />
+      </button>
+
+      {open ? (
+        <span
+          role="tooltip"
+          className={cn(
+            "absolute left-1/2 top-full z-50 mt-2 -translate-x-1/2",
+            "w-max max-w-[70vw] rounded-lg px-2.5 py-1.5",
+            "bg-foreground text-background text-xs font-medium text-center",
+            "shadow-lg animate-in fade-in-0 zoom-in-95",
+          )}
+        >
+          {/* Caret pointing back at the badge. */}
+          <span
+            aria-hidden
+            className="absolute -top-1 left-1/2 size-2 -translate-x-1/2 rotate-45 bg-foreground"
+          />
+          {LABEL}
+        </span>
+      ) : null}
+    </span>
+  );
+}