Component

WeekdayLedger

It asks for a starting date, then files each child into the next weekday in order. The date is real, the calendar is real, and the reason to put interface labels on a weekly ledger is not.

Possible use

It could be used to assign the fields of a handoff card to the days of a review sprint, or to make a presenter schedule four agenda labels across a week before discussing any of them.

Reasonable alternative

A reasonable local alternative is an array of labels and a small calendar grid, or simply rendering the labels together. Publishing a weekday filing ceremony is difficult to defend when the date is not actually scheduling anything.

01 / Preview

Try it yourself.

Title

Status

Owner

Date

Choose a date and file the labels into a week that did not ask for them.

Choose any date, file the labels, and watch them receive consecutive weekdays.

Mechanism

1: Choose an ordinary starting date.
2: File the week; the date's weekday becomes the first column.
3: Each child moves into the next weekday in sequence.
4: Clear the ledger to return the labels to their waiting row.

02 / Usage

Put it somewhere.

example.tsxTSX

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

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

03 / API

Small surface area.

PropTypeDescription

childrenReactNodeThe content filed into consecutive weekdays after a date is submitted.