Component

NeighborMarch

It turns a row into a tiny corridor. The first piece may be anywhere, but every next choice must be one position away; a long-distance choice resets the route.

Possible use

It could make a reviewer inspect fields as though they were tiles in a corridor, or make a presenter walk an agenda left and right instead of selecting a topic directly.

Reasonable alternative

A reasonable local alternative is a normal list with independent focus. Adjacency is not a useful requirement for reading.

01 / Preview

Try it yourself.

Mechanism

1: Start anywhere in the row.
2: After that, choose only an untouched piece directly beside the current one.
3: A long jump clears the route and sends the march back to its first step.
4: Visit the full row to finish the corridor.

02 / Usage

Put it somewhere.

example.tsxTSX

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

export function CorridorFields() {
  return (
    <NeighborMarch>
      <span>Title</span>
      <span>Status</span>
      <span>Owner</span>
      <span>Date</span>
    </NeighborMarch>
  );
}

03 / API

Small surface area.

PropTypeDescription

childrenReactNodeThe pieces visited through the adjacent-only route.