Annuaire: afficher la photo de vitrine (fallback logo)

- getActiveMembersWithCategory renvoie coverUrl + logoUrl
- Carte annuaire affiche l'image de vitrine (coverUrl) ; si absente,
  bascule sur le logo (logoUrl) ; sinon placeholder raye

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
MichaelandClaude Opus 4.8 committed 2026-06-27 10:01:54 +02:00
1 parent 839aa5d045
commit 4193d8e914
2 files changed
+17 -6

No files matched your search

+15 -6
View File
@@ -9,6 +9,8 @@ export type DirectoryMember = {
description: string | null; description: string | null;
city: string | null; city: string | null;
address: string | null; address: string | null;
coverUrl: string | null;
logoUrl: string | null;
categoryLabel: string | null; categoryLabel: string | null;
accent: string | null; accent: string | null;
hasPromo: boolean; hasPromo: boolean;
@@ -187,7 +189,9 @@ export function AnnuaireClient({
{/* grid / empty */} {/* grid / empty */}
{list.length > 0 ? ( {list.length > 0 ? (
<div className="grid grid-3" style={{ gap: 20 }}> <div className="grid grid-3" style={{ gap: 20 }}>
{list.map((m, i) => ( {list.map((m, i) => {
const image = m.coverUrl || m.logoUrl;
return (
<Link <Link
key={m.id} key={m.id}
href={`/adherents/${m.id}`} href={`/adherents/${m.id}`}
@@ -198,15 +202,19 @@ export function AnnuaireClient({
style={{ style={{
position: "relative", position: "relative",
height: 150, height: 150,
background: i % 2 === 0 ? STRIPE_WARM : STRIPE_COOL, background: image
? `center/cover no-repeat url(${image})`
: i % 2 === 0 ? STRIPE_WARM : STRIPE_COOL,
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
justifyContent: "center", justifyContent: "center",
}} }}
> >
<span style={{ fontSize: 10, letterSpacing: "0.12em", color: "#a99c82", textTransform: "uppercase" }}> {!image && (
photo vitrine <span style={{ fontSize: 10, letterSpacing: "0.12em", color: "#a99c82", textTransform: "uppercase" }}>
</span> photo vitrine
</span>
)}
{m.categoryLabel && ( {m.categoryLabel && (
<span style={{ position: "absolute", top: 12, left: 12, background: m.accent ?? "#9a6638", color: "#fff", borderRadius: 999, padding: "5px 12px", fontSize: 11, fontWeight: 700 }}> <span style={{ position: "absolute", top: 12, left: 12, background: m.accent ?? "#9a6638", color: "#fff", borderRadius: 999, padding: "5px 12px", fontSize: 11, fontWeight: 700 }}>
{m.categoryLabel} {m.categoryLabel}
@@ -231,7 +239,8 @@ export function AnnuaireClient({
</div> </div>
</div> </div>
</Link> </Link>
))} );
})}
</div> </div>
) : ( ) : (
<div style={{ background: "#fff", border: "1px dashed #d8cdb4", borderRadius: 18, padding: 54, textAlign: "center" }}> <div style={{ background: "#fff", border: "1px dashed #d8cdb4", borderRadius: 18, padding: 54, textAlign: "center" }}>
+2
View File
@@ -10,6 +10,8 @@ export async function getActiveMembersWithCategory() {
description: members.description, description: members.description,
city: members.city, city: members.city,
address: members.address, address: members.address,
coverUrl: members.coverUrl,
logoUrl: members.logoUrl,
categoryLabel: categories.label, categoryLabel: categories.label,
accent: categories.accent, accent: categories.accent,
}) })