manufacturer hover popup + smart back link
Content Partners (and any other) company-hover preview previously used text-ink / bg-ink / brand-primary utilities that aren't defined in our Tailwind config, so the popup rendered as white background with no text color (inheriting near-white text from the dark theme parent). Replaced every undefined utility with concrete dark-theme colors matching the rest of the site: #111827 panel, #2a3a50 borders, #e8e8e8 body text, #60a5fa links, real semi-transparent chip badges. Manufacturer profile back-link now uses BackLink, a client component that calls router.back() when we have same-origin history — so clicking the breadcrumb from the homepage Content Partners hover returns the user to the homepage instead of dumping them at /manufacturers. Falls through to the directory link for new-tab opens, search-engine entries, and no-JS. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ryan Salazar
@@ -99,68 +99,68 @@ export default function CompanyMentionsHover() {
|
||||
role="dialog"
|
||||
aria-label={preview?.name ? `${preview.name} preview` : "Company preview"}
|
||||
style={{ position: "absolute", top: pos.top, left: pos.left, width: 360, zIndex: 999 }}
|
||||
className="bg-white text-ink border border-ink/10 rounded-xl shadow-2xl p-4 text-sm"
|
||||
className="bg-[#111827] text-[#e8e8e8] border border-[#2a3a50] rounded-xl shadow-2xl p-4 text-sm backdrop-blur-sm"
|
||||
onMouseEnter={() => { if (hideTimer.current) { window.clearTimeout(hideTimer.current); hideTimer.current = null; } }}
|
||||
onMouseLeave={() => { hideTimer.current = window.setTimeout(() => { setAnchor(null); setPreview(null); setPos(null); }, 180); }}
|
||||
>
|
||||
{loading || !preview ? (
|
||||
<div className="text-ink/50 text-xs py-2">Loading…</div>
|
||||
<div className="text-[#888] text-xs py-2">Loading…</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="flex items-start gap-3 mb-2">
|
||||
{preview.logoUrl ? (
|
||||
/* eslint-disable-next-line @next/next/no-img-element */
|
||||
<img src={preview.logoUrl} alt="" className="w-12 h-12 rounded bg-ink/5 object-contain flex-shrink-0" loading="lazy" />
|
||||
<img src={preview.logoUrl} alt="" className="w-12 h-12 rounded bg-white p-1 object-contain flex-shrink-0" loading="lazy" />
|
||||
) : (
|
||||
<div className="w-12 h-12 rounded bg-ink/5 flex items-center justify-center text-ink/40 font-bold flex-shrink-0">
|
||||
<div className="w-12 h-12 rounded bg-[#1a2535] flex items-center justify-center text-[#3b82f6] font-bold flex-shrink-0">
|
||||
{(preview.name || "?").trim().charAt(0).toUpperCase()}
|
||||
</div>
|
||||
)}
|
||||
<div className="min-w-0 flex-1">
|
||||
<Link href={`/manufacturers/${preview.slug}`} className="font-semibold text-ink hover:text-brand-primary block truncate">
|
||||
<Link href={`/manufacturers/${preview.slug}`} className="font-semibold text-white hover:text-[#3b82f6] block truncate">
|
||||
{preview.name}
|
||||
</Link>
|
||||
<div className="flex items-center gap-1.5 mt-0.5 flex-wrap text-[10px]">
|
||||
<div className="flex items-center gap-1.5 mt-1 flex-wrap text-[10px]">
|
||||
{preview.isActiveAdvertiser && (
|
||||
<span className="bg-emerald-50 text-emerald-700 px-1.5 py-0.5 rounded font-semibold uppercase tracking-wider">Sponsor</span>
|
||||
<span className="bg-emerald-500/15 text-emerald-300 border border-emerald-500/30 px-1.5 py-0.5 rounded font-semibold uppercase tracking-wider">Sponsor</span>
|
||||
)}
|
||||
{preview.exhibitsNab && (
|
||||
<span className="bg-amber-50 text-amber-700 px-1.5 py-0.5 rounded font-semibold uppercase tracking-wider">2026 NAB Show</span>
|
||||
<span className="bg-amber-500/15 text-amber-300 border border-amber-500/30 px-1.5 py-0.5 rounded font-semibold uppercase tracking-wider">2026 NAB Show</span>
|
||||
)}
|
||||
{preview.exhibitsIbc && (
|
||||
<span className="bg-blue-50 text-blue-700 px-1.5 py-0.5 rounded font-semibold uppercase tracking-wider">IBC 2026</span>
|
||||
<span className="bg-blue-500/15 text-blue-300 border border-blue-500/30 px-1.5 py-0.5 rounded font-semibold uppercase tracking-wider">IBC 2026</span>
|
||||
)}
|
||||
{preview.hq && <span className="text-ink/60">{preview.hq}</span>}
|
||||
{preview.hq && <span className="text-[#888]">{preview.hq}</span>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{preview.bio && (
|
||||
<p className="text-ink/70 text-xs leading-snug mb-3 line-clamp-4">{preview.bio}</p>
|
||||
<p className="text-[#cbd5e1] text-xs leading-snug mb-3 line-clamp-4">{preview.bio}</p>
|
||||
)}
|
||||
|
||||
{preview.stories.length > 0 && (
|
||||
<div className="border-t border-ink/10 pt-2">
|
||||
<div className="text-[10px] uppercase tracking-widest text-ink/50 font-bold mb-1.5">Recent coverage</div>
|
||||
<div className="border-t border-[#2a3a50] pt-2">
|
||||
<div className="text-[10px] uppercase tracking-widest text-[#888] font-bold mb-1.5">Recent coverage</div>
|
||||
<ul className="space-y-1">
|
||||
{preview.stories.slice(0, 3).map((s) => (
|
||||
<li key={s.slug}>
|
||||
<Link href={`/news/${s.slug}`} className="text-xs text-brand-primary hover:underline line-clamp-2">
|
||||
<Link href={`/news/${s.slug}`} className="text-xs text-[#60a5fa] hover:text-[#93c5fd] hover:underline line-clamp-2">
|
||||
{s.title}
|
||||
</Link>
|
||||
{s.date && <span className="text-[10px] text-ink/40 ml-1">· {new Date(s.date).toISOString().slice(0, 10)}</span>}
|
||||
{s.date && <span className="text-[10px] text-[#666] ml-1">· {new Date(s.date).toISOString().slice(0, 10)}</span>}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="border-t border-ink/10 mt-3 pt-2 flex items-center justify-between">
|
||||
<Link href={`/manufacturers/${preview.slug}`} className="text-xs font-semibold text-brand-primary hover:underline">
|
||||
<div className="border-t border-[#2a3a50] mt-3 pt-2 flex items-center justify-between">
|
||||
<Link href={`/manufacturers/${preview.slug}`} className="text-xs font-semibold text-[#60a5fa] hover:text-[#93c5fd] hover:underline">
|
||||
Full profile →
|
||||
</Link>
|
||||
{preview.website && (
|
||||
<a href={preview.website} target="_blank" rel="noopener noreferrer" className="text-[10px] text-ink/50 hover:text-brand-primary">
|
||||
<a href={preview.website} target="_blank" rel="noopener noreferrer" className="text-[10px] text-[#888] hover:text-[#3b82f6]">
|
||||
{preview.website.replace(/^https?:\/\//, "").replace(/\/$/, "")} ↗
|
||||
</a>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user