Component

PunchProof

It turns a simple child into a paper proof card. Each press punches the next visible hole in a five-step strip, changes the card's completion state and leaves the content over-certified at the end.

Possible use

It could make a reviewer punch an approval card five times before a handoff note leaves the desk, or let a presenter perforate an agenda label before moving to the next slide.

Reasonable alternative

A reasonable local alternative is a normal progress indicator or no approval ceremony. A paper card does not become more correct because a button opened five holes in it.

01 / Preview

Try it yourself.

Ready to file

Mechanism

1: Start with an ordinary card and five empty perforations.
2: Press Punch next hole. Each press opens the next physical hole.
3: The card changes from waiting to complete only after all five holes are open.
4: Re-file the card when the approval has become sufficiently official.

02 / Usage

Put it somewhere.

example.tsxTSX

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

export function OverCertifiedNotice() {
  return <PunchProof><span>Ready to file</span></PunchProof>;
}

03 / API

Small surface area.

PropTypeDescription

childrenReactNodeThe content placed on the proof card and cleared after five perforations.