mirror of
https://github.com/R0m1k3/PleinR.git
synced 2026-10-14 10:49:35 +02:00
Claude
b0154d6fc1
Quand un adhérent n'a pas de photo de couverture/vitrine, le logo était affiché sur fond blanc brut. Il est désormais présenté dans une carte blanche encadrée (bordure crème + ombre douce) sur fond crème dégradé — cohérent avec le thème. S'applique à la fiche, l'annuaire et le carrousel. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01XwfhYHzC9hQWPDnQ2p53GL
84 lines
2.2 KiB
TypeScript
84 lines
2.2 KiB
TypeScript
import type { CSSProperties, ReactNode } from "react";
|
|
|
|
const STRIPE_WARM =
|
|
"repeating-linear-gradient(45deg,#efe9da,#efe9da 12px,#e6ddc9 12px,#e6ddc9 24px)";
|
|
|
|
/**
|
|
* Zone d'image "vitrine" d'un adhérent.
|
|
* - Photo de couverture présente -> affichée en plein cadre (cover).
|
|
* - Sinon, le logo est affiché centré et réduit (contain ~80%), pas étiré.
|
|
* - Sinon, fond rayé + texte placeholder.
|
|
*/
|
|
export function VitrineImage({
|
|
coverUrl,
|
|
logoUrl,
|
|
height,
|
|
stripe = STRIPE_WARM,
|
|
placeholder = "photo vitrine",
|
|
children,
|
|
}: {
|
|
coverUrl?: string | null;
|
|
logoUrl?: string | null;
|
|
height: number;
|
|
stripe?: string;
|
|
placeholder?: string;
|
|
children?: ReactNode;
|
|
}) {
|
|
const cover = coverUrl || null;
|
|
const logoOnly = !cover && logoUrl ? logoUrl : null;
|
|
|
|
const base: CSSProperties = {
|
|
position: "relative",
|
|
height,
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
overflow: "hidden",
|
|
};
|
|
|
|
if (cover) {
|
|
return (
|
|
<div style={{ ...base, background: `center/cover no-repeat url(${cover})` }}>{children}</div>
|
|
);
|
|
}
|
|
|
|
if (logoOnly) {
|
|
return (
|
|
<div style={{ ...base, background: "linear-gradient(160deg,#fffdf8 0%,#f3ecdc 100%)", padding: "min(8%, 22px)" }}>
|
|
{/* Cadre thème autour du logo (évite le bloc blanc nu) */}
|
|
<div
|
|
style={{
|
|
background: "#fff",
|
|
border: "1px solid #e6dcc6",
|
|
borderRadius: 14,
|
|
boxShadow: "0 14px 30px -20px rgba(40,30,15,0.35)",
|
|
padding: "min(6%, 18px) min(9%, 28px)",
|
|
maxWidth: "84%",
|
|
maxHeight: "84%",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
}}
|
|
>
|
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
|
<img
|
|
src={logoOnly}
|
|
alt=""
|
|
style={{ maxWidth: "100%", maxHeight: "100%", objectFit: "contain", display: "block" }}
|
|
/>
|
|
</div>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div style={{ ...base, background: stripe }}>
|
|
<span style={{ fontSize: 10.5, letterSpacing: "0.12em", color: "#a99c82", textTransform: "uppercase" }}>
|
|
{placeholder}
|
|
</span>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|