Marco
8c397c5dcb
Products now come from Payload's new "products" collection instead of a hardcoded catalog, same pattern already used for blog posts: - lib/payload.ts: getProducts()/getProductBySlug() (server-side fetch, 60s ISR) - New /api/products route so client components (CartContent, RelatedProducts) can reach the same data without a server-only import - lib/products.ts: useProducts() hook replacing the old PRODUCTS record - ProductGrid (/shop) fetches server-side directly; now shows all catalog products except notizbuch-klarheit (matches Figma's 4-card page-shop-overview — still cross-sold via RelatedProducts) - ProductSpotlight and /todo-cards' Pricing now pull price/photo from the same CMS product instead of a separately hardcoded "12,90 €", so the two can't silently drift apart - formatPrice moved to a new lib/format.ts (plain, no "use client") — Server Components can't call functions exported from a "use client" module directly, which lib/products.ts now is because of the hook Also fixes two unrelated bugs surfaced along the way: the add-to-cart button visibly resizing when its "Hinzugefügt ✓" success state showed (fixed with a CSS-grid text stack sized to the wider of the two strings), and removes the now-unused local product images from public/.
36 lines
1.4 KiB
TypeScript
36 lines
1.4 KiB
TypeScript
import { FREE_SHIPPING_THRESHOLD, TOTAL_DAYS_DE } from "../lib/shipping";
|
||
import { formatPrice } from "../lib/format";
|
||
|
||
const items = [
|
||
{
|
||
icon: "/icon-trust-shipping.png",
|
||
title: "Schneller Versand",
|
||
desc: `In ${TOTAL_DAYS_DE.min}–${TOTAL_DAYS_DE.max} Werktagen bei dir.`,
|
||
},
|
||
{
|
||
icon: "/icon-trust-free-shipping.png",
|
||
title: "Versandkostenfrei",
|
||
desc: `Ab ${formatPrice(FREE_SHIPPING_THRESHOLD)} Bestellwert innerhalb DE.`,
|
||
},
|
||
{ icon: "/icon-trust-heart.png", title: "Mit Liebe verpackt", desc: "Für mehr Freude beim Auspacken." },
|
||
];
|
||
|
||
export function TrustRow() {
|
||
return (
|
||
<div className="w-full bg-bg-base flex flex-col md:flex-row gap-6 md:gap-12 items-center justify-center py-8 px-[var(--layout-padding-x)]">
|
||
{items.map((item, i) => (
|
||
<div key={item.title} className="flex items-center gap-6 md:gap-12">
|
||
{i > 0 && <div className="hidden md:block h-10 w-px bg-border" />}
|
||
<div className="flex gap-4 items-center">
|
||
<img alt="" src={item.icon} className="size-8 shrink-0 object-contain" />
|
||
<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.desc}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
);
|
||
}
|