Marco/einfach-produktiv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Frontend support for stepRow subtitle + new icon block

Browse Source 
Mirrors the backend schema additions (StepRowBlock.items.subtitle,
new IconBlock) needed for the /lebensuhr Pages migration: PageBlock
type + mapPayloadPageBlock in payload.ts, a "icon" case in
PageBlocks.tsx, and SYMBOLIC_ICONS (the clock face) added alongside
STEP_ICONS in StepIcons.tsx — a distinct registry since these icons
are standalone, not part of an icon-above-text row.
This commit is contained in:
Marco
2026-08-26 20:26:46 +00:00
parent 885389b300
commit 2d9508324a
3 changed files with 43 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/PageBlocks.tsx
+7 -1
View File
@@ -5,7 +5,7 @@ import { getTestimonials } from "../lib/payload";
import { RichText } from "./RichText";
import { Quote } from "./Quote";
import { StepArrow } from "./StepArrow";
import { STEP_ICONS } from "./icons/StepIcons";
import { STEP_ICONS, SYMBOLIC_ICONS } from "./icons/StepIcons";
import { TestimonialsGrid } from "./TestimonialsGrid";
// Renders a Payload Pages document's `layout` blocks field — structurally
@@ -42,6 +42,11 @@ export function renderPageBlockSync(block: PageBlock): React.ReactNode {
case "quote":
return <Quote key={block.id}>{block.text}</Quote>;
case "icon": {
const SymbolIcon = SYMBOLIC_ICONS[block.icon];
return SymbolIcon ? <div key={block.id}>{SymbolIcon()}</div> : null;
}
case "image":
if (!block.image) return null;
return (
@@ -114,6 +119,7 @@ export function renderPageBlockSync(block: PageBlock): React.ReactNode {
</div>
<div className="flex flex-col gap-1 text-center">
<p className="font-semibold text-text-primary text-[1rem]">{item.title}</p>
{item.subtitle && <p className="font-semibold text-[0.75rem] text-brand">{item.subtitle}</p>}
<p className="text-[0.875rem] text-text-muted leading-[1.5]">{item.description}</p>
</div>
</div>,
app/components/icons/StepIcons.tsx
+26
View File
@@ -131,3 +131,29 @@ export const STEP_ICONS: Record<string, () => React.ReactNode> = {
trendingUp: IconTrendingUp,
shield: IconShield,
};
// Same symbolic clock icon /lebensuhr uses above its "24 Stunden" heading
// — purely decorative (no numbers/data), unlike the STEP_ICONS above which
// always sit inside an icon-above-text row. Keys MUST match the Payload
// IconBlock's `icon` select field options (docker/payload/src/blocks/
// IconBlock.ts) exactly.
function IconClockSymbol() {
return (
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" aria-hidden="true">
<circle cx="24" cy="24" r="21" stroke="#f6a701" strokeWidth="2" />
{[0, 30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330].map((deg) => {
const rad = (deg * Math.PI) / 180;
const x1 = 24 + 16 * Math.sin(rad), y1 = 24 - 16 * Math.cos(rad);
const x2 = 24 + 18.5 * Math.sin(rad), y2 = 24 - 18.5 * Math.cos(rad);
return <line key={deg} x1={x1} y1={y1} x2={x2} y2={y2} stroke="#f6a701" strokeWidth="1.5" strokeLinecap="round" />;
})}
<line x1="24" y1="24" x2="17" y2="15" stroke="#f6a701" strokeWidth="2" strokeLinecap="round" />
<line x1="24" y1="24" x2="32" y2="15" stroke="#f6a701" strokeWidth="2" strokeLinecap="round" />
<circle cx="24" cy="24" r="1.8" fill="#f6a701" />
</svg>
);
}
export const SYMBOLIC_ICONS: Record<string, () => React.ReactNode> = {
clockSymbol: IconClockSymbol,
};