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/3x3-system/page.tsx
+4 -34
View File
@@ -4,6 +4,7 @@ import Image from "next/image";
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 = "Das 3×3-System: Zu wenig geschafft oder zu viel gewollt?";
const description =
@@ -58,41 +59,10 @@ function Quote({ children }: { children: React.ReactNode }) {
);
}
// Same brand-orange line-icon language as /lebensuhr's IconSunrise etc. —
// switched from per-category red/amber/green (matching the original blog
// post's 🔴🟡🟢) to a single brand color, for consistency with every
// other icon-row on the site, none of which color-code their icons.
function IconTarget() {
return (
<svg width="40" height="40" viewBox="0 0 40 40" fill="none">
<circle cx="20" cy="20" r="16" stroke="#f6a701" strokeWidth="2" />
<circle cx="20" cy="20" r="9" stroke="#f6a701" strokeWidth="2" />
<circle cx="20" cy="20" r="2" fill="#f6a701" />
</svg>
);
}
function IconTrendingUp() {
return (
<svg width="44" height="40" viewBox="0 0 44 40" fill="none">
<path d="M4 30l10-10 6 6 14-14" stroke="#f6a701" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
<path d="M24 10h10v10" stroke="#f6a701" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</svg>
);
}
function IconShield() {
return (
<svg width="36" height="40" viewBox="0 0 36 40" fill="none">
<path d="M18 3l14 5v9c0 9-6 16-14 20-8-4-14-11-14-20v-9l14-5z" stroke="#f6a701" strokeWidth="2" strokeLinejoin="round" />
</svg>
);
}
const categories = [
{ icon: <IconTarget />, label: "Verantwortung", desc: "Etwas, das erledigt werden muss und für das du Verantwortung trägst." },
{ icon: <IconTrendingUp />, label: "Fortschritt", desc: "Etwas, das dich beruflich oder persönlich ein Stück weiterbringt." },
{ icon: <IconShield />, label: "Stabilität", desc: "Etwas, das deinen Alltag ordnet, deiner Gesundheit guttut oder Gleichgewicht schafft." },
{ icon: STEP_ICONS.target(), label: "Verantwortung", desc: "Etwas, das erledigt werden muss und für das du Verantwortung trägst." },
{ icon: STEP_ICONS.trendingUp(), label: "Fortschritt", desc: "Etwas, das dich beruflich oder persönlich ein Stück weiterbringt." },
{ icon: STEP_ICONS.shield(), label: "Stabilität", desc: "Etwas, das deinen Alltag ordnet, deiner Gesundheit guttut oder Gleichgewicht schafft." },
];
export default function DreiXDreiSystemPage() {