Marco
475ee3fa16
OrderFilters.tsx: filter chips (7 status + 5 payment-status + N year options as pills) read as cluttered and ate a lot of vertical space. Replaced with 3 native <select>s in a row (a small Client Component just for the onChange→router.push navigation) — same URL-search-param filtering underneath, just a much more compact control. TrustRow.tsx: replaced the hardcoded min-h-[3.2rem] title reservation (a guess, and it visibly over-reserved space for single-line titles) with a real CSS Grid + `grid-template-rows: subgrid` — every badge's icon+title box shares the same row-track height (auto-sized to whichever title actually needs 2 lines), so descriptions align without any hardcoded value. The two structurally different layouts (icon-above-title below lg vs. icon-beside-a-title/description-stack at lg) now render as two separate blocks instead of fighting one shared shape. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
69 lines
3.5 KiB
TypeScript
69 lines
3.5 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 (
|
|
<div className="w-full bg-bg-base py-8 px-[var(--layout-padding-x)]">
|
|
{/* Below lg (1024px): a CSS Grid with `grid-template-rows: subgrid` —
|
|
not a fixed min-height guess — so every badge's "icon+title" box
|
|
shares the SAME row track height (auto-sized to whichever
|
|
badge's title actually needs 2 lines), and every description
|
|
starts exactly at that row's bottom edge regardless of how many
|
|
lines its own title happens to wrap to. 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) — icon above text instead shrinks each badge down
|
|
to just its text column's width, letting a real row of 3 fit
|
|
without wrapping at all. Two structurally different layouts
|
|
(icon-above-title here vs. icon-beside-a-title/description-
|
|
stack at lg:) don't share one flexible markup shape cleanly, so
|
|
this renders as two separate blocks (lg:hidden / hidden lg:flex)
|
|
rather than fighting one shape across both breakpoints. */}
|
|
<div
|
|
className="lg:hidden grid justify-center gap-x-6 gap-y-1"
|
|
style={{ gridTemplateColumns: `repeat(${items.length}, auto)`, gridTemplateRows: "repeat(2, auto)" }}
|
|
>
|
|
{items.map((item) => (
|
|
<div key={item.id} className="grid row-span-2 justify-items-center" style={{ gridTemplateRows: "subgrid" }}>
|
|
<div className="flex flex-col items-center gap-2">
|
|
<div className="relative size-8 shrink-0">
|
|
<Image alt="" src={item.icon} fill sizes="32px" className="object-contain" />
|
|
</div>
|
|
<p className="font-semibold text-body text-text-primary text-center">{item.title}</p>
|
|
</div>
|
|
<p className="text-body-sm text-text-muted text-center">{item.description}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* lg+: original icon-beside-text row with dividers, unchanged. */}
|
|
<div className="hidden lg:flex justify-center gap-12 items-center">
|
|
{items.map((item, i) => (
|
|
<div key={item.id} className="flex items-center gap-12">
|
|
{i > 0 && <div className="h-10 w-px bg-border" />}
|
|
<div className="flex items-center gap-4">
|
|
<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>
|
|
</div>
|
|
);
|
|
}
|