Current lifecycle state.
<div class="status-row" style="font-size:13px;">
<span class="status-row__accent" style="background:#BFD9F2;"></span>
<span class="status-pill status-pill--inprogress">
<span class="status-pill__icons">
<svg class="status-pill__icon status-pill__icon--todo" viewBox="0 0 16 16" width="1em" height="1em" aria-hidden="true"><circle cx="8" cy="8" r="5.5" fill="none" stroke="currentColor" stroke-width="1.8"></circle></svg>
<svg class="status-pill__icon status-pill__icon--inprogress" viewBox="0 0 16 16" width="1em" height="1em" aria-hidden="true"><circle cx="8" cy="8" r="5.5" fill="none" stroke="currentColor" stroke-width="1.8"></circle><path d="M8 8 L8 2.5 A5.5 5.5 0 0 1 13 9.5 Z" fill="currentColor"></path></svg>
<svg class="status-pill__icon status-pill__icon--done" viewBox="0 0 16 16" width="1em" height="1em" aria-hidden="true"><path d="M3.5 8.5 L6.5 11.5 L12.5 4.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>
<svg class="status-pill__icon status-pill__icon--blocked" viewBox="0 0 16 16" width="1em" height="1em" aria-hidden="true"><circle cx="8" cy="8" r="5.5" fill="none" stroke="currentColor" stroke-width="1.8"></circle><path d="M4.5 4.5 L11.5 11.5" stroke="currentColor" stroke-width="1.8"></path></svg>
</span>
<span class="status-pill__labels">
<span class="status-pill__label status-pill__label--todo">To do</span>
<span class="status-pill__label status-pill__label--inprogress">In progress</span>
<span class="status-pill__label status-pill__label--done">Done</span>
<span class="status-pill__label status-pill__label--blocked">Blocked</span>
</span>
</span>
<span class="status-row__task">Refactor auth module</span>
</div>
<style>
.status-row { display: flex; align-items: center; gap: 10px; font-family: system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 10px 14px; border-radius: 10px; max-width: 420px; }
.status-row__accent { width: 4px; align-self: stretch; border-radius: 2px; flex: 0 0 auto; }
.status-pill { display: inline-flex; align-items: center; gap: 6px; padding: .35em .7em; border-radius: 999px; font-weight: 600; font-size: 1em; flex: 0 0 auto; }
.status-pill__icons, .status-pill__labels { display: inline-flex; }
.status-pill__icon, .status-pill__label { display: none; }
.status-pill--todo { background: #24143014; color: #241430; }
.status-pill--todo .status-pill__icon--todo, .status-pill--todo .status-pill__label--todo { display: inline-flex; }
.status-pill--inprogress { background: #BFD9F250; color: #1a3a5c; }
.status-pill--inprogress .status-pill__icon--inprogress, .status-pill--inprogress .status-pill__label--inprogress { display: inline-flex; }
.status-pill--done { background: #A8E6C150; color: #1c5c34; }
.status-pill--done .status-pill__icon--done, .status-pill--done .status-pill__label--done { display: inline-flex; }
.status-pill--blocked { background: #F5C2E050; color: #8a1050; }
.status-pill--blocked .status-pill__icon--blocked, .status-pill--blocked .status-pill__label--blocked { display: inline-flex; }
.status-row__task { font-weight: 500; font-size: 14px; }
</style><div class="flex items-center gap-2.5 font-sans text-[#241430] bg-[#FAF7F2] px-3.5 py-2.5 rounded-[10px] max-w-[420px]" style="font-size:13px;">
<span class="w-1 self-stretch rounded-full flex-none" style="background:#BFD9F2;"></span>
<span class="status-pill-tw status-pill-tw--inprogress inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full font-semibold flex-none" style="font-size:1em;">
<span class="inline-flex">
<svg class="status-pill-tw__icon status-pill-tw__icon--todo" viewBox="0 0 16 16" width="1em" height="1em" aria-hidden="true"><circle cx="8" cy="8" r="5.5" fill="none" stroke="currentColor" stroke-width="1.8"></circle></svg>
<svg class="status-pill-tw__icon status-pill-tw__icon--inprogress" viewBox="0 0 16 16" width="1em" height="1em" aria-hidden="true"><circle cx="8" cy="8" r="5.5" fill="none" stroke="currentColor" stroke-width="1.8"></circle><path d="M8 8 L8 2.5 A5.5 5.5 0 0 1 13 9.5 Z" fill="currentColor"></path></svg>
<svg class="status-pill-tw__icon status-pill-tw__icon--done" viewBox="0 0 16 16" width="1em" height="1em" aria-hidden="true"><path d="M3.5 8.5 L6.5 11.5 L12.5 4.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>
<svg class="status-pill-tw__icon status-pill-tw__icon--blocked" viewBox="0 0 16 16" width="1em" height="1em" aria-hidden="true"><circle cx="8" cy="8" r="5.5" fill="none" stroke="currentColor" stroke-width="1.8"></circle><path d="M4.5 4.5 L11.5 11.5" stroke="currentColor" stroke-width="1.8"></path></svg>
</span>
<span class="inline-flex">
<span class="status-pill-tw__label status-pill-tw__label--todo">To do</span>
<span class="status-pill-tw__label status-pill-tw__label--inprogress">In progress</span>
<span class="status-pill-tw__label status-pill-tw__label--done">Done</span>
<span class="status-pill-tw__label status-pill-tw__label--blocked">Blocked</span>
</span>
</span>
<span class="font-medium text-sm">Refactor auth module</span>
</div>
<style>
.status-pill-tw__icon, .status-pill-tw__label { display: none; }
.status-pill-tw--todo { background: #24143014; color: #241430; }
.status-pill-tw--todo .status-pill-tw__icon--todo, .status-pill-tw--todo .status-pill-tw__label--todo { display: inline-flex; }
.status-pill-tw--inprogress { background: #BFD9F250; color: #1a3a5c; }
.status-pill-tw--inprogress .status-pill-tw__icon--inprogress, .status-pill-tw--inprogress .status-pill-tw__label--inprogress { display: inline-flex; }
.status-pill-tw--done { background: #A8E6C150; color: #1c5c34; }
.status-pill-tw--done .status-pill-tw__icon--done, .status-pill-tw--done .status-pill-tw__label--done { display: inline-flex; }
.status-pill-tw--blocked { background: #F5C2E050; color: #8a1050; }
.status-pill-tw--blocked .status-pill-tw__icon--blocked, .status-pill-tw--blocked .status-pill-tw__label--blocked { display: inline-flex; }
</style>export function StatusPill({
task = "Refactor auth module",
status = "inprogress",
accent = "#BFD9F2",
size = 13,
showIcon = true,
}) {
const meta = {
todo: {
text: "To do", bg: "#24143014", color: "#241430",
icon: <circle cx="8" cy="8" r="5.5" fill="none" stroke="currentColor" strokeWidth="1.8" />,
},
inprogress: {
text: "In progress", bg: "#BFD9F250", color: "#1a3a5c",
icon: (
<>
<circle cx="8" cy="8" r="5.5" fill="none" stroke="currentColor" strokeWidth="1.8" />
<path d="M8 8 L8 2.5 A5.5 5.5 0 0 1 13 9.5 Z" fill="currentColor" />
</>
),
},
done: {
text: "Done", bg: "#A8E6C150", color: "#1c5c34",
icon: <path d="M3.5 8.5 L6.5 11.5 L12.5 4.5" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />,
},
blocked: {
text: "Blocked", bg: "#F5C2E050", color: "#8a1050",
icon: (
<>
<circle cx="8" cy="8" r="5.5" fill="none" stroke="currentColor" strokeWidth="1.8" />
<path d="M4.5 4.5 L11.5 11.5" stroke="currentColor" strokeWidth="1.8" />
</>
),
},
}[status] ?? {};
return (
<div style={{ display: "flex", alignItems: "center", gap: 10, fontFamily: "system-ui, sans-serif",
color: "#241430", background: "#FAF7F2", padding: "10px 14px", borderRadius: 10, fontSize: size, maxWidth: 420 }}>
<span style={{ width: 4, alignSelf: "stretch", borderRadius: 2, background: accent, flex: "0 0 auto" }} />
<span style={{ display: "inline-flex", alignItems: "center", gap: 6, padding: "0.35em 0.7em",
borderRadius: 999, fontWeight: 600, background: meta.bg, color: meta.color, flex: "0 0 auto" }}>
{showIcon && (
<svg viewBox="0 0 16 16" width="1em" height="1em" aria-hidden="true">{meta.icon}</svg>
)}
<span>{meta.text}</span>
</span>
<span style={{ fontWeight: 500, fontSize: 14 }}>{task}</span>
</div>
);
}