A process as a row of pills: each step lights up in turn while a comet laps its border and a dot carries on to the next.
import { WorkflowPills } from "@/components/ui/workflow-pills";
const settings = {
accent: "#7f72e3",
orientation: "horizontal",
title: "How a feature ships",
text: "Four stages, each one lit in turn, from the first user interview to the numbers after launch.",
step1: "Discover",
label1: "Interviews",
step2: "Define",
label2: "The problem",
step3: "Design",
label3: "Prototypes",
step4: "Deliver",
label4: "Metrics",
};
export default function Demo(props: Partial<typeof settings>) {
const s = { ...settings, ...props };
return (
<div className="w-full max-w-4xl p-6 lg:p-10">
<h2 className="text-2xl font-medium tracking-tight text-foreground">{s.title}</h2>
<p className="mb-10 mt-2 max-w-xl text-sm text-muted-foreground">{s.text}</p>
<WorkflowPills
aria-label={s.title}
accent={s.accent}
orientation={s.orientation === "vertical" ? "vertical" : "horizontal"}
steps={[
{ title: s.step1, sub: s.label1 },
{ title: s.step2, sub: s.label2 },
{ title: s.step3, sub: s.label3 },
{ title: s.step4, sub: s.label4 },
]}
/>
</div>
);
}