{author.headline}
diff --git a/components/ui/Tooltip.tsx b/components/ui/Tooltip.tsx index a687e7079..30ea5971d 100644 --- a/components/ui/Tooltip.tsx +++ b/components/ui/Tooltip.tsx @@ -82,41 +82,50 @@ const TooltipContent = ({ if (!tooltipRef.current || !triggerRect) return; const tooltip = tooltipRef.current; - const tooltipRect = tooltip.getBoundingClientRect(); - const windowWidth = window.innerWidth; - const windowHeight = window.innerHeight; - let top = 0; - let left = 0; + const updatePosition = () => { + const tooltipRect = tooltip.getBoundingClientRect(); + const windowWidth = window.innerWidth; + const windowHeight = window.innerHeight; - // Calculate position based on specified position - switch (position) { - case 'top': - top = triggerRect.top - tooltipRect.height - 8; - left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2; - break; - case 'bottom': - top = triggerRect.bottom + 8; - left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2; - break; - case 'left': - top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2; - left = triggerRect.left - tooltipRect.width - 8; - break; - case 'right': - top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2; - left = triggerRect.right + 8; - break; - } + let top = 0; + let left = 0; + + // Calculate position based on specified position + switch (position) { + case 'top': + top = triggerRect.top - tooltipRect.height - 8; + left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2; + break; + case 'bottom': + top = triggerRect.bottom + 8; + left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2; + break; + case 'left': + top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2; + left = triggerRect.left - tooltipRect.width - 8; + break; + case 'right': + top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2; + left = triggerRect.right + 8; + break; + } - // Adjust if tooltip would go off screen - if (left < 10) left = 10; - if (left + tooltipRect.width > windowWidth - 10) left = windowWidth - tooltipRect.width - 10; - if (top < 10) top = 10; - if (top + tooltipRect.height > windowHeight - 10) top = windowHeight - tooltipRect.height - 10; + // Adjust if tooltip would go off screen + if (left < 10) left = 10; + if (left + tooltipRect.width > windowWidth - 10) left = windowWidth - tooltipRect.width - 10; + if (top < 10) top = 10; + if (top + tooltipRect.height > windowHeight - 10) + top = windowHeight - tooltipRect.height - 10; + + setTooltipPosition({ top, left }); + setMounted(true); + }; - setTooltipPosition({ top, left }); - setMounted(true); + // Content that loads after opening resizes the tooltip and moves its anchor point. + const resizeObserver = new ResizeObserver(updatePosition); + resizeObserver.observe(tooltip); + return () => resizeObserver.disconnect(); }, [triggerRect, position]); if (!triggerRect) return null; diff --git a/components/ui/VerifiedBadge.tsx b/components/ui/VerifiedBadge.tsx index 69762e3fa..bbc78972d 100644 --- a/components/ui/VerifiedBadge.tsx +++ b/components/ui/VerifiedBadge.tsx @@ -1,9 +1,13 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faBadgeCheck } from '@fortawesome/pro-solid-svg-icons'; import { faBadgeCheck as faBadgeCheckLight } from '@fortawesome/pro-light-svg-icons'; +import { faXTwitter } from '@fortawesome/free-brands-svg-icons'; +import { GraduationCap, IdCard, ShieldCheck } from 'lucide-react'; import clsx from 'clsx'; import { Tooltip } from '@/components/ui/Tooltip'; import { useVerification } from '@/contexts/VerificationContext'; +import { useAuthorVerificationMethods } from '@/hooks/useAuthor'; +import type { VerificationMethod } from '@/types/authorProfile'; interface VerifiedBadgeProps { size?: 'xs' | 'sm' | 'md' | 'lg'; @@ -11,16 +15,44 @@ interface VerifiedBadgeProps { className?: string; showTooltip?: boolean; variant?: 'solid' | 'outlined'; + verificationMethods?: VerificationMethod[]; + /** Loads the verification methods on hover when they aren't passed. */ + authorId?: number; } +const METHOD_DETAILS: Record