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;
};
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({
manufacturers,
shows = [],
@@ -77,14 +85,14 @@ export default function ManufacturerDirectoryClient({
return (
<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">
<input
type="search"
value={q}
onChange={(e) => setQ(e.target.value)}
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>
@@ -97,7 +105,7 @@ export default function ManufacturerDirectoryClient({
type="button"
onClick={() => setShowFilter("all")}
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>
@@ -112,7 +120,7 @@ export default function ManufacturerDirectoryClient({
type="button"
onClick={() => setShowFilter(s.slug)}
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" : ""}`}
>
@@ -120,7 +128,7 @@ export default function ManufacturerDirectoryClient({
{count > 0 ? (
<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>
);
@@ -136,7 +144,7 @@ export default function ManufacturerDirectoryClient({
className={`min-w-[28px] h-7 px-1.5 rounded font-semibold ${
letter === l
? "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}
@@ -153,15 +161,15 @@ export default function ManufacturerDirectoryClient({
<Link
key={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">
{m.logo_url ? (
{resolveLogoUrl(m.slug, m.logo_url) ? (
/* eslint-disable-next-line @next/next/no-img-element */
<img
src={m.logo_url}
src={resolveLogoUrl(m.slug, m.logo_url)!}
alt={`${m.company_name} logo`}
className="w-full h-full object-contain"
className="w-full h-full object-contain p-1"
loading="lazy"
/>
) : (
@@ -171,7 +179,7 @@ export default function ManufacturerDirectoryClient({
)}
</div>
<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}
</h3>
<div className="flex items-center gap-1.5 mt-1 mb-1.5 flex-wrap">
@@ -190,7 +198,7 @@ export default function ManufacturerDirectoryClient({
</span>
)}
</div>
<p className="text-xs text-[#888] line-clamp-2">
<p className="text-xs text-[#64748B] line-clamp-2">
{m.bio || "Profile coming soon."}
</p>
</div>