Workflow

Props

Source apps/www/src/sections/Workflow.astro @ gitt.one

---
/**
 * Workflow — a horizontal process chain on a dark stone band: numbered circles
 *   joined by arrows, one short label each (<WorkflowStep>).
 *
 * Use for: a pipeline or lifecycle in one-word or few-word stages — "Order →
 *   Build → Test → Deploy" — as a compact divider between bigger sections.
 * Not for: steps that need a sentence of explanation each (<Steps>).
 * Children: <WorkflowStep> tags only; three or six fit a row best (six per row
 *   on desktop, three on tablets). Numbering and arrows are automatic.
 */
interface Props {
  /** anchor of the section */
  id?: string;
  /** a heading centered above the chain */
  title?: string;
}
const { id, title } = Astro.props;
---

<section id={id} class="bg-stone-800">
  {title && (
    <h2 class="m-0 px-4 py-4 text-center text-3xl font-extrabold tracking-tight text-white sm:px-6 sm:py-6 sm:text-4xl lg:px-8">{title}</h2>
  )}
  <ol class="grid list-none [counter-reset:wf] divide-y divide-stone-800 border border-l-0 border-r-0 border-stone-800 bg-stone-800 sm:grid-cols-3 md:divide-y-0 lg:grid-cols-6">
    <slot />
  </ol>
</section>