90 lines
3.0 KiB
TypeScript
90 lines
3.0 KiB
TypeScript
"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>
|
|
);
|
|
}
|