Major workflow phase.
3 steps in this stage
<div class="workflow-stage" data-status="current" style="--accent:#BFD9F2;border-top:4px solid #BFD9F2;">
<div class="workflow-stage__head">
<span class="workflow-stage__position">Stage 2 of 4</span>
<span class="workflow-stage__badge">
<svg class="workflow-stage__icon workflow-stage__icon--completed" viewBox="0 0 20 20" aria-hidden="true"><path d="M4 10.5l3.5 3.5L16 5.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
<svg class="workflow-stage__icon workflow-stage__icon--current" viewBox="0 0 20 20" aria-hidden="true"><circle cx="10" cy="10" r="4" fill="currentColor"/><circle cx="10" cy="10" r="8" fill="none" stroke="currentColor" stroke-width="1.4"/></svg>
<svg class="workflow-stage__icon workflow-stage__icon--upcoming" viewBox="0 0 20 20" aria-hidden="true"><circle cx="10" cy="10" r="8" fill="none" stroke="currentColor" stroke-width="1.4" stroke-dasharray="2.5 2.5"/></svg>
current
</span>
</div>
<h3 class="workflow-stage__name">Fulfilment</h3>
<p class="workflow-stage__steps">3 steps in this stage</p>
</div>
<style>
.workflow-stage { width: 280px; padding: 18px; background: #FAF7F2; color: #241430; font: 14px/1.4 system-ui, sans-serif; border-radius: 14px; box-shadow: 0 8px 24px rgba(36,20,48,.12); box-sizing: border-box; }
.workflow-stage__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.workflow-stage__position { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #241430b3; }
.workflow-stage__badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-weight: 700; font-size: 11px; text-transform: capitalize; }
.workflow-stage__icon { width: 12px; height: 12px; display: none; }
.workflow-stage[data-status="completed"] .workflow-stage__icon--completed { display: block; }
.workflow-stage[data-status="current"] .workflow-stage__icon--current { display: block; }
.workflow-stage[data-status="upcoming"] .workflow-stage__icon--upcoming { display: block; }
.workflow-stage[data-status="completed"] .workflow-stage__badge { background: #A8E6C1; color: #17532F; }
.workflow-stage[data-status="current"] .workflow-stage__badge { background: var(--accent); color: #12385E; }
.workflow-stage[data-status="upcoming"] .workflow-stage__badge { background: #24143014; color: #241430b3; }
.workflow-stage__name { margin: 10px 0 4px; font-size: 18px; }
.workflow-stage__steps { margin: 0; font-size: 12.5px; color: #241430b3; }
</style><div class="workflow-stage-tw w-[280px] p-[18px] bg-[#FAF7F2] text-[#241430] font-sans text-sm rounded-2xl shadow-lg box-border" data-status="current" style="--accent:#BFD9F2;border-top:4px solid #BFD9F2;">
<div class="flex items-center justify-between gap-2">
<span class="text-[11px] font-bold uppercase tracking-wide text-[#241430]/70">Stage 2 of 4</span>
<span class="workflow-stage-tw__badge inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full font-bold text-[11px] capitalize">
<svg class="workflow-stage-tw__icon workflow-stage-tw__icon--completed w-3 h-3" viewBox="0 0 20 20" aria-hidden="true"><path d="M4 10.5l3.5 3.5L16 5.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
<svg class="workflow-stage-tw__icon workflow-stage-tw__icon--current w-3 h-3" viewBox="0 0 20 20" aria-hidden="true"><circle cx="10" cy="10" r="4" fill="currentColor"/><circle cx="10" cy="10" r="8" fill="none" stroke="currentColor" stroke-width="1.4"/></svg>
<svg class="workflow-stage-tw__icon workflow-stage-tw__icon--upcoming w-3 h-3" viewBox="0 0 20 20" aria-hidden="true"><circle cx="10" cy="10" r="8" fill="none" stroke="currentColor" stroke-width="1.4" stroke-dasharray="2.5 2.5"/></svg>
current
</span>
</div>
<h3 class="mt-2.5 mb-1 text-lg">Fulfilment</h3>
<p class="m-0 text-[12.5px] text-[#241430]/70">3 steps in this stage</p>
</div>
<style>
.workflow-stage-tw__icon { display: none; }
.workflow-stage-tw[data-status="completed"] .workflow-stage-tw__icon--completed { display: block; }
.workflow-stage-tw[data-status="current"] .workflow-stage-tw__icon--current { display: block; }
.workflow-stage-tw[data-status="upcoming"] .workflow-stage-tw__icon--upcoming { display: block; }
.workflow-stage-tw[data-status="completed"] .workflow-stage-tw__badge { background: #A8E6C1; color: #17532F; }
.workflow-stage-tw[data-status="current"] .workflow-stage-tw__badge { background: var(--accent); color: #12385E; }
.workflow-stage-tw[data-status="upcoming"] .workflow-stage-tw__badge { background: #24143014; color: #241430b3; }
</style>export function WorkflowStage({
name = "Fulfilment",
position = 2,
total = 4,
stepsCount = 3,
status = "current",
accent = "#BFD9F2",
}) {
const palette = {
completed: { background: "#A8E6C1", color: "#17532F" },
current: { background: accent, color: "#12385E" },
upcoming: { background: "#24143014", color: "#241430b3" },
}[status] ?? {};
return (
<div style={{ width: 280, padding: 18, background: "#FAF7F2", color: "#241430", fontFamily: "system-ui, sans-serif",
fontSize: 14, borderRadius: 14, boxShadow: "0 8px 24px rgba(36,20,48,.12)", boxSizing: "border-box",
borderTop: `4px solid ${accent}` }}>
<div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8 }}>
<span style={{ fontSize: 11, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.04em", color: "#241430b3" }}>
Stage {position} of {total}
</span>
<span style={{ display: "inline-flex", alignItems: "center", gap: 5, padding: "3px 10px", borderRadius: 999,
fontWeight: 700, fontSize: 11, textTransform: "capitalize", ...palette }}>
{status === "completed" && (
<svg width="12" height="12" viewBox="0 0 20 20" aria-hidden="true"><path d="M4 10.5l3.5 3.5L16 5.5" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /></svg>
)}
{status === "current" && (
<svg width="12" height="12" viewBox="0 0 20 20" aria-hidden="true"><circle cx="10" cy="10" r="4" fill="currentColor" /><circle cx="10" cy="10" r="8" fill="none" stroke="currentColor" strokeWidth="1.4" /></svg>
)}
{status === "upcoming" && (
<svg width="12" height="12" viewBox="0 0 20 20" aria-hidden="true"><circle cx="10" cy="10" r="8" fill="none" stroke="currentColor" strokeWidth="1.4" strokeDasharray="2.5 2.5" /></svg>
)}
{status}
</span>
</div>
<h3 style={{ margin: "10px 0 4px", fontSize: 18 }}>{name}</h3>
<p style={{ margin: 0, fontSize: 12.5, color: "#241430b3" }}>{stepsCount} steps in this stage</p>
</div>
);
}