94 lines
3.0 KiB
TypeScript
94 lines
3.0 KiB
TypeScript
/**
|
|
* Hand-drawn SVG icons for each stage. Single 1.5px stroke, slight
|
|
* imperfection, no fills — meant to read as field-journal sketches.
|
|
*
|
|
* Each icon's metaphor traces the lifecycle of a co-op:
|
|
* Stage 0 — Inquiry: a seed, just starting
|
|
* Stage 1 — Convene: a sprout, two leaves
|
|
* Stage 2 — Feasibility: a measuring scale (weighing options)
|
|
* Stage 3 — Connect: linked hands / chain of cooperation
|
|
* Stage 4 — Build: a hammer over a foundation
|
|
* Stage 5 — Stabilize: a basket of harvested produce / open store
|
|
*/
|
|
|
|
interface StageIconProps {
|
|
rank: number;
|
|
className?: string;
|
|
}
|
|
|
|
export function StageIcon({ rank, className }: StageIconProps) {
|
|
const Icon = ICONS[rank] ?? ICONS[0];
|
|
return <Icon className={className} />;
|
|
}
|
|
|
|
const baseProps = {
|
|
viewBox: "0 0 32 32",
|
|
fill: "none",
|
|
stroke: "currentColor",
|
|
strokeWidth: 1.5,
|
|
strokeLinecap: "round" as const,
|
|
strokeLinejoin: "round" as const,
|
|
"aria-hidden": true,
|
|
};
|
|
|
|
const ICONS: Record<number, React.FC<{ className?: string }>> = {
|
|
// 0 — Seed in earth
|
|
0: ({ className }) => (
|
|
<svg {...baseProps} className={className}>
|
|
<path d="M16 22c-3-1-4-3-4-5.5 0-2.2 1.8-4.5 4-5.5 2.2 1 4 3.3 4 5.5 0 2.5-1 4.5-4 5.5Z" />
|
|
<path d="M16 11.5v6" strokeDasharray="0.5 1.5" />
|
|
<path d="M6 24h20" />
|
|
<path d="M9 26.5h2M14 27h1.5M19 26.5h2M23 26h1" />
|
|
</svg>
|
|
),
|
|
// 1 — Sprout with two leaves
|
|
1: ({ className }) => (
|
|
<svg {...baseProps} className={className}>
|
|
<path d="M16 26V14" />
|
|
<path d="M16 18c-3-2-5-1.5-6-3.5C9 13 10 11 13 11.5c2 .3 3 2.5 3 6.5Z" />
|
|
<path d="M16 16c2.5-1.5 4.5-1 5.5-3 .8-1.6-.5-3-3-2.5-1.7.4-2.5 2.5-2.5 5.5Z" />
|
|
<path d="M9 26h14" />
|
|
</svg>
|
|
),
|
|
// 2 — Balance scale (weighing feasibility)
|
|
2: ({ className }) => (
|
|
<svg {...baseProps} className={className}>
|
|
<path d="M16 6v18" />
|
|
<path d="M11 26h10" />
|
|
<path d="M8 11h16" />
|
|
<path d="M8 11l-3 6h6l-3-6Z" />
|
|
<path d="M24 11l-3 6h6l-3-6Z" />
|
|
</svg>
|
|
),
|
|
// 3 — Linked rings
|
|
3: ({ className }) => (
|
|
<svg {...baseProps} className={className}>
|
|
<circle cx="11" cy="16" r="5" />
|
|
<circle cx="21" cy="16" r="5" />
|
|
<path d="M14 12.5q1 .5 2 1.5" opacity="0.6" />
|
|
<path d="M18 18q1 1.5 2 2" opacity="0.6" />
|
|
</svg>
|
|
),
|
|
// 4 — Hammer over foundation
|
|
4: ({ className }) => (
|
|
<svg {...baseProps} className={className}>
|
|
<path d="M14 6l8 4-2 3-8-4 2-3Z" />
|
|
<path d="M13.5 8.5L6 22l3 1.5 7.5-13" />
|
|
<path d="M5 26h22" />
|
|
<path d="M8 26v-2M14 26v-2M20 26v-2M26 26v-2" opacity="0.5" />
|
|
</svg>
|
|
),
|
|
// 5 — Storefront with awning
|
|
5: ({ className }) => (
|
|
<svg {...baseProps} className={className}>
|
|
<path d="M5 11h22l-2-3H7l-2 3Z" />
|
|
<path d="M5 11l2 4M9 11l1 4M13 11l.5 4M17 11l.5 4M21 11l1 4M25 11l2 4" opacity="0.5" />
|
|
<path d="M6 26V15" />
|
|
<path d="M26 26V15" />
|
|
<path d="M6 26h20" />
|
|
<rect x="13" y="18" width="6" height="8" />
|
|
<path d="M16 22.5v.5" />
|
|
</svg>
|
|
),
|
|
};
|