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/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,
};