"use client"; import { useCallback, useEffect, useLayoutEffect, useRef, useState, } from "react"; import { track } from "@vercel/analytics"; import { Check, X as CloseIcon, Link2, Share2 } from "lucide-react"; import { useTranslations } from "next-intl"; import { createPortal } from "react-dom"; const SITE_URL = "https://petdex.crafter.run"; type Props = { /** Public handle without leading @ — used to build the URL. */ handle: string; /** Display name surfaced in the share text. Falls back to @handle when null. */ displayName: string | null; }; // Profile-level share button. Sits next to "Edit profile" in the // header so creators have an obvious affordance to spread their page. // Visible to everyone (owner + visitor) — fans sharing a profile they // like is the same growth motion as the creator promoting themselves. // // Surfaces: Copy link, Share to X, Share to LinkedIn, native Share // (when the browser supports it). The same set the per-pet action // menu uses, just scoped to the /u/ URL. We portal the // dropdown to so the parent stacking context can't clip it. export function ProfileShareButton({ handle, displayName }: Props) { const t = useTranslations("profileShare"); const [open, setOpen] = useState(false); const [copied, setCopied] = useState(false); const [mounted, setMounted] = useState(false); const wrapRef = useRef(null); const triggerRef = useRef(null); const menuRef = useRef(null); const [menuPos, setMenuPos] = useState<{ top: number; left: number; } | null>(null); useEffect(() => { setMounted(true); }, []); const profileUrl = `${SITE_URL}/u/${handle}`; const shareLabel = displayName ?? `@${handle}`; const shareText = t("shareText", { name: shareLabel }); const computePos = useCallback(() => { const el = triggerRef.current; if (!el) return; const rect = el.getBoundingClientRect(); const MENU_WIDTH = 256; const top = rect.bottom + 8; const left = Math.max(8, rect.right - MENU_WIDTH); setMenuPos({ top, left }); }, []); useLayoutEffect(() => { if (!open) return; computePos(); }, [open, computePos]); useEffect(() => { if (!open) return; const h = () => computePos(); window.addEventListener("resize", h); window.addEventListener("scroll", h, true); return () => { window.removeEventListener("resize", h); window.removeEventListener("scroll", h, true); }; }, [open, computePos]); useEffect(() => { if (!open) return; function handleClick(e: MouseEvent) { const target = e.target as Node; if (wrapRef.current?.contains(target)) return; if (menuRef.current?.contains(target)) return; setOpen(false); } function handleKey(e: KeyboardEvent) { if (e.key === "Escape") setOpen(false); } document.addEventListener("mousedown", handleClick); document.addEventListener("keydown", handleKey); return () => { document.removeEventListener("mousedown", handleClick); document.removeEventListener("keydown", handleKey); }; }, [open]); const onCopy = useCallback(async () => { try { await navigator.clipboard.writeText(profileUrl); setCopied(true); track("profile_share", { handle, target: "copy" }); window.setTimeout(() => setCopied(false), 1400); } catch { /* ignore clipboard failures */ } }, [handle, profileUrl]); const onShareX = useCallback(() => { const url = `https://x.com/intent/tweet?text=${encodeURIComponent( shareText, )}&url=${encodeURIComponent(profileUrl)}`; track("profile_share", { handle, target: "x" }); window.open(url, "_blank", "noopener,noreferrer,width=560,height=540"); setOpen(false); }, [handle, profileUrl, shareText]); const onShareLinkedIn = useCallback(() => { const url = `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent( profileUrl, )}`; track("profile_share", { handle, target: "linkedin" }); window.open(url, "_blank", "noopener,noreferrer,width=620,height=600"); setOpen(false); }, [handle, profileUrl]); const onShareNative = useCallback(async () => { if (typeof navigator === "undefined" || !("share" in navigator)) return; try { await ( navigator as Navigator & { share: (data: ShareData) => Promise; } ).share({ title: `${shareLabel} | Petdex`, text: shareText, url: profileUrl, }); track("profile_share", { handle, target: "native" }); setOpen(false); } catch { /* user cancelled */ } }, [handle, profileUrl, shareLabel, shareText]); const supportsNative = typeof navigator !== "undefined" && "share" in navigator; const menuNode = open && menuPos ? ( ) : null; return (

{mounted && menuNode ? createPortal(menuNode, document.body) : null}

); } function XIcon({ className }: { className?: string }) { return ( ); } function LinkedInIcon({ className }: { className?: string }) { return ( ); }