localadministrator/avbeat-com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Manufacturers directory: fix light-theme text contrast and filter bar

Browse Source
This commit is contained in:
Local Administrator
2026-06-25 16:22:40 +00:00
parent 64600c4f28
commit 3f23447af7
1 changed files with 194 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/app/manufacturers/DirectoryClient.tsx
View File

@@ -25,6 +25,14 @@ type ShowOption = {
status: string; status: string;
}; };
const LOGO_OVERRIDES: Record<string, string> = {
"blackmagic-design": "/img/partners/blackmagic-design.png",
};
function resolveLogoUrl(slug: string, logoUrl: string | null): string | null {
return LOGO_OVERRIDES[slug] || logoUrl || null;
}
export default function ManufacturerDirectoryClient({ export default function ManufacturerDirectoryClient({
manufacturers, manufacturers,
shows = [], shows = [],
@@ -77,14 +85,14 @@ export default function ManufacturerDirectoryClient({
return ( return (
<div> <div>
<div className="bg-[#111] border border-[#DCE6F2] rounded-xl p-4 mb-6 flex flex-col gap-3 md:flex-row md:items-center md:gap-4"> <div className="bg-white border border-[#DCE6F2] rounded-xl p-4 mb-6 flex flex-col gap-3 md:flex-row md:items-center md:gap-4">
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<input <input
type="search" type="search"
value={q} value={q}
onChange={(e) => setQ(e.target.value)} onChange={(e) => setQ(e.target.value)}
placeholder="Search by company or product…" placeholder="Search by company or product…"
className="w-full bg-[#F8FAFC] border border-[#DCE6F2] rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[#1D4ED8]/40" className="w-full bg-[#F8FAFC] border border-[#DCE6F2] rounded-md px-3 py-2 text-sm text-[#0F172A] placeholder:text-[#94A3B8] focus:outline-none focus:ring-2 focus:ring-[#1D4ED8]/40"
/> />
</div> </div>
</div> </div>
@@ -97,7 +105,7 @@ export default function ManufacturerDirectoryClient({
type="button" type="button"
onClick={() => setShowFilter("all")} onClick={() => setShowFilter("all")}
className={`px-3 py-1.5 rounded text-xs font-semibold ${ className={`px-3 py-1.5 rounded text-xs font-semibold ${
showFilter === "all" ? "bg-[#1D4ED8] text-white" : "bg-[#F8FAFC] border border-[#DCE6F2] text-[#aaa] hover:bg-[#FFFFFF]" showFilter === "all" ? "bg-[#1D4ED8] text-white" : "bg-white border border-[#DCE6F2] text-[#475569] hover:bg-[#F8FAFC]"
}`} }`}
> >
All shows <span className="ml-1 opacity-60">({manufacturers.length.toLocaleString()})</span> All shows <span className="ml-1 opacity-60">({manufacturers.length.toLocaleString()})</span>
@@ -112,7 +120,7 @@ export default function ManufacturerDirectoryClient({
type="button" type="button"
onClick={() => setShowFilter(s.slug)} onClick={() => setShowFilter(s.slug)}
className={`px-3 py-1.5 rounded text-xs font-semibold ${ className={`px-3 py-1.5 rounded text-xs font-semibold ${
active ? "bg-[#1D4ED8] text-white" : "bg-[#F8FAFC] border border-[#DCE6F2] text-[#aaa] hover:bg-[#FFFFFF]" active ? "bg-[#1D4ED8] text-white" : "bg-white border border-[#DCE6F2] text-[#475569] hover:bg-[#F8FAFC]"
}`} }`}
title={`${s.name} · ${s.start_date}${count === 0 ? " · exhibitor list coming soon" : ""}`} title={`${s.name} · ${s.start_date}${count === 0 ? " · exhibitor list coming soon" : ""}`}
> >
@@ -120,7 +128,7 @@ export default function ManufacturerDirectoryClient({
{count > 0 ? ( {count > 0 ? (
<span className="ml-1 opacity-60">({count})</span> <span className="ml-1 opacity-60">({count})</span>
) : ( ) : (
<span className="ml-1 text-amber-400 text-[10px]">soon</span> <span className="ml-1 text-amber-700 text-[10px]">soon</span>
)} )}
</button> </button>
); );
@@ -136,7 +144,7 @@ export default function ManufacturerDirectoryClient({
className={`min-w-[28px] h-7 px-1.5 rounded font-semibold ${ className={`min-w-[28px] h-7 px-1.5 rounded font-semibold ${
letter === l letter === l
? "bg-[#1D4ED8] text-white" ? "bg-[#1D4ED8] text-white"
: "bg-[#F8FAFC] border border-[#DCE6F2] text-[#aaa] hover:bg-[#FFFFFF]" : "bg-white border border-[#DCE6F2] text-[#475569] hover:bg-[#F8FAFC]"
}`} }`}
> >
{l} {l}
@@ -153,15 +161,15 @@ export default function ManufacturerDirectoryClient({
<Link <Link
key={m.slug} key={m.slug}
href={`/manufacturers/${m.slug}`} href={`/manufacturers/${m.slug}`}
className="group bg-[#F8FAFC] border border-[#DCE6F2] rounded-xl p-4 hover:border-[#1D4ED8] hover:shadow-sm transition-all flex gap-3" className="group bg-white border border-[#DCE6F2] rounded-xl p-4 hover:border-[#1D4ED8] hover:shadow-sm transition-all flex gap-3"
> >
<div className="w-14 h-14 rounded-lg bg-[#FFFFFF] flex items-center justify-center overflow-hidden flex-shrink-0"> <div className="w-14 h-14 rounded-lg bg-[#FFFFFF] flex items-center justify-center overflow-hidden flex-shrink-0">
{m.logo_url ? ( {resolveLogoUrl(m.slug, m.logo_url) ? (
/* eslint-disable-next-line @next/next/no-img-element */ /* eslint-disable-next-line @next/next/no-img-element */
<img <img
src={m.logo_url} src={resolveLogoUrl(m.slug, m.logo_url)!}
alt={`${m.company_name} logo`} alt={`${m.company_name} logo`}
className="w-full h-full object-contain" className="w-full h-full object-contain p-1"
loading="lazy" loading="lazy"
/> />
) : ( ) : (
@@ -171,7 +179,7 @@ export default function ManufacturerDirectoryClient({
)} )}
</div> </div>
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
<h3 className="font-semibold text-[#e0e0e0] truncate group-hover:text-[#1D4ED8] transition-colors"> <h3 className="font-semibold text-[#0F172A] truncate group-hover:text-[#1D4ED8] transition-colors">
{m.company_name} {m.company_name}
</h3> </h3>
<div className="flex items-center gap-1.5 mt-1 mb-1.5 flex-wrap"> <div className="flex items-center gap-1.5 mt-1 mb-1.5 flex-wrap">
@@ -190,7 +198,7 @@ export default function ManufacturerDirectoryClient({
</span> </span>
)} )}
</div> </div>
<p className="text-xs text-[#888] line-clamp-2"> <p className="text-xs text-[#64748B] line-clamp-2">
{m.bio || "Profile coming soon."} {m.bio || "Profile coming soon."}
</p> </p>
</div> </div>