Component

PalindromeLatch

It makes a latch out of a palindrome. Activate the pieces in ascending order and then walk back through the same route; a wrong piece clears the sequence, while a complete mirrored route seals the visible latch tray.

Possible use

It could be used to make a reviewer open and close a handoff card through a perfectly mirrored ceremony, or to let a presenter walk an agenda forward and backward before it is considered settled.

Reasonable alternative

A reasonable local alternative is one ordered list and a normal completion button. Publishing a palindrome latch is difficult to defend because an action sequence does not improve when it has to rhyme with itself.

01 / Preview

Try it yourself.

The latch is waiting for its first side.

Mechanism

1: The required route is 1, 2, 3, 4, 3, 2, 1.
2: Click the pieces in that order, using Enter or Space when focused.
3: A wrong click clears the route and returns the tray to waiting.
4: Complete the palindrome to seal the visible sequence.

02 / Usage

Put it somewhere.

example.tsxTSX

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

export function MirroredAgenda() {
  return (
    <PalindromeLatch>
      <span>Open</span>
      <span>Review</span>
      <span>Decide</span>
      <span>Close</span>
    </PalindromeLatch>
  );
}

03 / API

Small surface area.

PropTypeDescription

childrenReactNodeThe pieces forming the ascending half of the mirrored activation route.