Marco
11c8d0b7b6
Cart summary trust badges: side by side between sm and lg TrustRow.tsx: rebuilt as a single continuous below-lg tier instead of mobile-nebeneinander/tablet-stacked — icon above text (shrinking each badge to its text column's width) plus dropping whitespace-nowrap on title/description below lg (wrapping within their own narrow column instead of forcing overflow) means a full row of 3 badges now fits without needing to wrap or stack, avoiding the previously-reverted "odd item alone on its own line" issue a flex-wrap attempt hit. CartContent.tsx: the sidebar's trust-badge list (title only) now goes side by side between sm (640px) and lg (1024px) instead of always stacked — that sidebar is full page width through that whole range, plenty of room for 3 short titles in a row. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
47 lines
2.6 KiB
TypeScript
47 lines
2.6 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 (
|
|
// 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.
|
|
<div className="w-full bg-bg-base flex justify-center py-8 px-[var(--layout-padding-x)]">
|
|
<div className="flex flex-row justify-center gap-6 lg:gap-12 items-start lg:items-center w-full lg:w-auto">
|
|
{items.map((item, i) => (
|
|
<div key={item.id} className="flex flex-1 lg:flex-none items-center gap-6 lg:gap-12 min-w-0">
|
|
{i > 0 && <div className="hidden lg:block h-10 w-px bg-border" />}
|
|
<div className="flex flex-col items-center text-center gap-2 w-full min-w-0 lg:flex-row lg:items-center lg:text-left lg:gap-4 lg:w-auto">
|
|
<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-center min-w-0 lg:items-start">
|
|
<p className="font-semibold text-body text-text-primary lg:whitespace-nowrap">{item.title}</p>
|
|
<p className="text-body-sm text-text-muted lg:whitespace-nowrap">{item.description}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|