Component

CyclicPassage

Click the stations left to right, then click from station two through the end and wrap back to station one. The actual visitation counts and route manifest update after each accepted station; a wrong station is rejected and Restart passage clears the route.

Possible use

It could let a reviewer walk a handoff through its offices once, then repeat the route from the second office for reassurance, or let a presenter make an agenda audience revisit a slide in a rotated order. The second lap adds ceremony without adding coverage.

Reasonable alternative

A reasonable local alternative is a normal ordered list or a checklist when review order matters. A route manifest should not be required to remember a short sequence.

01 / Preview

Try it yourself.

The manifest remembers the route

Awaiting the first passage

Mechanism

1: Pass Draft, Witness, then File from left to right.
2: Begin the second lap at Witness and wrap back to Draft.
3: A wrong station is rejected while the manifest keeps the accepted route.
4: Restart passage when the two-lap filing route is complete.

02 / Usage

Put it somewhere.

example.tsxTSX

import { CyclicPassage } from "gra-ui";
import "gra-ui/styles.css";

export function TwoLapNotice() {
  return (
    <CyclicPassage>
      <span>Draft</span>
      <span>Witness</span>
      <span>File</span>
    </CyclicPassage>
  );
}

03 / API

Small surface area.

PropTypeDescription

childrenReactNodeThe stations visited in a left-to-right lap followed by a rotated lap.