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:
36
src/app/manufacturers/[slug]/BackLink.tsx
Normal file
36
src/app/manufacturers/[slug]/BackLink.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
@@ -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]">
|
||||
|
||||
Reference in New Issue
Block a user