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

Consolidate per-page icon duplicates into a shared registry

Browse Source 
/lebensuhr, /3x3-system, and /7-tage-klarheits-check each defined
their own local copies of the same hand-drawn brand-line icons.
Moved them into app/components/icons/StepIcons.tsx as a keyed
registry (STEP_ICONS) — also what the new Payload Pages collection's
StepRowBlock select field maps onto by key, so a page-builder step
row can reference these same icons without duplicating SVG paths a
third time.
This commit is contained in:
Marco
2026-08-26 20:03:57 +00:00
parent e2d81fabc7
commit 940545888c
4 changed files with 147 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/lebensuhr/page.tsx
+5 -43
View File
@@ -3,6 +3,7 @@ import Link from "next/link";
import { Reveal, RevealGroup, RevealItem } from "../components/Reveal";
import { Footer } from "../components/Footer";
import { StepArrow } from "../components/StepArrow";
import { STEP_ICONS } from "../components/icons/StepIcons";
const title = "Die Lebensuhr: Wie spät ist es in deinem Leben?";
const description =
@@ -84,45 +85,6 @@ function IconClockSymbol() {
// "So funktioniert" section and /todo-cards's/newsletter's own "How it
// works" sections use — reused here for the four life phases instead of
// stacking them as plain H3 blocks.
function IconSunrise() {
return (
<svg width="44" height="40" viewBox="0 0 44 40" fill="none">
<line x1="4" y1="30" x2="40" y2="30" stroke="#f6a701" strokeWidth="2" strokeLinecap="round" />
<path d="M13 30a9 9 0 0 1 18 0" stroke="#f6a701" strokeWidth="2" strokeLinecap="round" />
<line x1="22" y1="4" x2="22" y2="10" stroke="#f6a701" strokeWidth="2" strokeLinecap="round" />
<line x1="9" y1="10" x2="13" y2="14" stroke="#f6a701" strokeWidth="2" strokeLinecap="round" />
<line x1="35" y1="10" x2="31" y2="14" stroke="#f6a701" strokeWidth="2" strokeLinecap="round" />
</svg>
);
}
function IconGrowthBars() {
return (
<svg width="44" height="40" viewBox="0 0 44 40" fill="none">
<line x1="4" y1="36" x2="40" y2="36" stroke="#f6a701" strokeWidth="2" strokeLinecap="round" />
<rect x="7" y="25" width="7" height="11" rx="1" stroke="#f6a701" strokeWidth="2" />
<rect x="18.5" y="16" width="7" height="20" rx="1" stroke="#f6a701" strokeWidth="2" />
<rect x="30" y="6" width="7" height="30" rx="1" stroke="#f6a701" strokeWidth="2" />
</svg>
);
}
function IconSunHigh() {
return (
<svg width="40" height="40" viewBox="0 0 40 40" fill="none">
<circle cx="20" cy="20" r="8" stroke="#f6a701" strokeWidth="2" />
<line x1="20" y1="2" x2="20" y2="7" stroke="#f6a701" strokeWidth="2" strokeLinecap="round" />
<line x1="20" y1="33" x2="20" y2="38" stroke="#f6a701" strokeWidth="2" strokeLinecap="round" />
<line x1="2" y1="20" x2="7" y2="20" stroke="#f6a701" strokeWidth="2" strokeLinecap="round" />
<line x1="33" y1="20" x2="38" y2="20" stroke="#f6a701" strokeWidth="2" strokeLinecap="round" />
<line x1="7" y1="7" x2="10.5" y2="10.5" stroke="#f6a701" strokeWidth="2" strokeLinecap="round" />
<line x1="29.5" y1="29.5" x2="33" y2="33" stroke="#f6a701" strokeWidth="2" strokeLinecap="round" />
<line x1="33" y1="7" x2="29.5" y2="10.5" stroke="#f6a701" strokeWidth="2" strokeLinecap="round" />
<line x1="10.5" y1="29.5" x2="7" y2="33" stroke="#f6a701" strokeWidth="2" strokeLinecap="round" />
</svg>
);
}
// Same checkmark used by /7-tage-klarheits-check's "Das erwartet dich"
// checklist.
function Check() {
@@ -140,19 +102,19 @@ function Check() {
// breakpoints), not derived from it.
const phases = [
{
icon: <IconSunrise />,
icon: STEP_ICONS.sunrise(),
title: "Der Morgen: Ausprobieren",
ageRange: "ca. 0–25 Jahre",
desc: "Man probiert aus, lernt, macht Fehler, entdeckt Interessen. Man muss noch nicht alles perfekt können.",
},
{
icon: <IconGrowthBars />,
icon: STEP_ICONS.growthBars(),
title: "Der Vormittag: Aufbauen",
ageRange: "ca. 25–45 Jahre",
desc: "Jetzt wird gebaut – Gewohnheiten, Beziehungen, Fähigkeiten. Ein Leben, das sich nach dem eigenen anfühlt.",
},
{
icon: <IconSunHigh />,
icon: STEP_ICONS.sunHigh(),
title: "Der Nachmittag: Stärken",
ageRange: "ca. 45–65 Jahre",
desc: "Nicht alles neu, sondern das Bestehende wird stärker: Erfahrung zahlt sich aus, Entscheidungen fallen leichter.",
@@ -160,7 +122,7 @@ const phases = [
{
// Same icon as the morning — a rising and a setting sun both show as
// the same arc-above-the-horizon silhouette, rays above it.
icon: <IconSunrise />,
icon: STEP_ICONS.sunrise(),
title: "Der Abend: Weitergeben",
ageRange: "ca. 65–90 Jahre",
desc: "Weniger Wachstum, mehr Bedeutung – weiterzugeben, was man aufgebaut hat.",