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
2026-05-29 15:34:54 +00:00
parent cbdf61073f
commit a045d6c558
3 changed files with 56 additions and 21 deletions

View File

@@ -0,0 +1,36 @@
"use client";
/**
* Smart back link for the manufacturer profile page.
*
* Renders as a server-rendered <a> linking to the directory so search
* engines and no-JS users still get a sensible href. Client-side it
* intercepts the click and calls `router.back()` — if the user arrived
* here from anywhere on the BB site (homepage Content Partners hover,
* an article body link, the directory itself) we'll return them there.
* Falls through to the directory only when there is no in-app history.
*/
import Link from "next/link";
import { useRouter } from "next/navigation";
import type { MouseEvent } from "react";
export default function BackLink() {
const router = useRouter();
function onClick(e: MouseEvent<HTMLAnchorElement>) {
if (typeof window === "undefined") return;
// Same-origin Referer means we have somewhere to go back to. The
// browser history length > 1 check catches the case where the user
// opened the profile in a new tab — in that case we leave the default
// navigation (to /manufacturers) alone.
const sameOrigin = !!document.referrer && new URL(document.referrer).origin === window.location.origin;
if (sameOrigin && window.history.length > 1) {
e.preventDefault();
router.back();
}
}
return (
<Link href="/manufacturers" onClick={onClick} className="hover:text-[#3b82f6]">
Back
</Link>
);
}

View File

@@ -4,6 +4,7 @@ import Link from "next/link";
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import { createClient } from "@/lib/supabase/server";
import BackLink from "./BackLink";
export const revalidate = 1800;
@@ -166,9 +167,7 @@ export default async function ManufacturerProfile({
/>
<article className="max-w-4xl mx-auto px-4 py-10">
<nav className="text-xs text-[#888] mb-6">
<Link href="/manufacturers" className="hover:text-[#3b82f6]">
Production Industry Manufacturers
</Link>
<BackLink />
</nav>
<header className="flex flex-col sm:flex-row gap-6 mb-8 pb-8 border-b border-[#252525]">