Marco
d389790c57
TrustRow now uses flex-wrap + justify-center so badges flow as many per row as actually fit at the current width, wrapping (and auto-centering, a native flexbox behavior for the last wrapped line) instead of needing a breakpoint or risking overflow. Replaces the earlier lg:-only structural exception entirely. NewsletterModal's close button was absolutely positioned inside the dialog's own scrolling container, so it scrolled away with the content. Switched to sticky (top-6, ml-auto for horizzontal position, -mb-6 to cancel its own height so it doesn't push content down) so it stays pinned to the top-right corner while scrolling.
43 lines
2.2 KiB
TypeScript
43 lines
2.2 KiB
TypeScript
import Image from "next/image";
|
|
import { getTrustBadges } from "../lib/payload";
|
|
|
|
// Content now lives in Payload (TrustBadges collection) instead of being
|
|
// hardcoded here, so copy (e.g. the shipping timeframe/threshold numbers)
|
|
// can be updated without a code deploy. If the fetch fails or nothing is
|
|
// seeded yet, the row just doesn't render rather than showing stale
|
|
// hardcoded fallback text that could drift from the real numbers.
|
|
export async function TrustRow() {
|
|
const items = await getTrustBadges();
|
|
if (items.length === 0) return null;
|
|
|
|
return (
|
|
// flex-wrap + justify-center instead of a hard sm:/lg: structural
|
|
// breakpoint — CSS flexbox centers each *wrapped line* independently,
|
|
// so badges naturally flow as many-per-row as actually fit at the
|
|
// current width (1 per row on a narrow phone, 2 with the 3rd
|
|
// centered below it once there's room, all 3 in one row at Desktop
|
|
// widths) with no breakpoint math and no overflow risk, since an
|
|
// item that doesn't fit just wraps instead of forcing a scrollbar
|
|
// (this used to be a hard lg: exception for exactly that overflow
|
|
// reason — see git history — no longer needed with wrap). Divider
|
|
// bars between badges stay lg:-only for simplicity, since which
|
|
// badges share a line isn't fixed/known ahead of time below lg:.
|
|
<div className="w-full bg-bg-base flex flex-wrap items-center justify-center gap-x-12 gap-y-6 lg:gap-12 py-8 px-[var(--layout-padding-x)]">
|
|
{items.map((item, i) => (
|
|
<div key={item.id} className="flex items-center gap-6 lg:gap-12">
|
|
{i > 0 && <div className="hidden lg:block h-10 w-px bg-border" />}
|
|
<div className="flex gap-4 items-center">
|
|
<div className="relative size-8 shrink-0">
|
|
<Image alt="" src={item.icon} fill sizes="32px" className="object-contain" />
|
|
</div>
|
|
<div className="flex flex-col gap-0.5 items-start">
|
|
<p className="font-semibold text-body text-text-primary whitespace-nowrap">{item.title}</p>
|
|
<p className="text-body-sm text-text-muted whitespace-nowrap">{item.description}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|