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 ( // Below lg (1024px): badges sit side by side as one row (never wrap, // never stack to one-per-row) with icon ABOVE text, centered — icon // beside text (the lg: layout below) is what made a full row of 3 // badges too wide below ~1024px in the first place (see git history: // originally lg:-gated for exactly this, then briefly tried flex-wrap, // which put an odd 3rd item alone on its own wrapped line and read as // disorganized). Putting the icon above the text instead shrinks each // badge down to just its text column's width, and — combined with // dropping whitespace-nowrap on the title/description below lg: so // long copy wraps within its own narrow column instead of forcing // overflow — a real row of 3 now fits without wrapping at all, so // there's no odd-item-out case to worry about. lg:+ reverts to the // original icon-beside-text row-with-dividers layout unchanged.
{items.map((item, i) => (
{i > 0 &&
}
{/* min-h reserves 2 lines worth of height (text-body's line-height is 1.6rem) below lg: — titles are short enough that some wrap to 2 lines in their narrow stacked column and some don't, and without a reserved height the description below started at a different y-position from one badge to the next depending on whether its own title happened to wrap. Reset to min-h-0 at lg: (whitespace-nowrap there forces a single line anyway, so the reservation would just add unwanted empty space). */}

{item.title}

{item.description}

))}
); }