components/halves/Ledger.tsx

import type { ReactNode } from "react";

export function Ledger({ children }: { children: ReactNode }) {
  return <div className="ledger">{children}</div>;
}

export function LedgerRow({
  index,
  title,
  children,
  meta,
}: {
  index: string;
  title: string;
  children?: ReactNode;
  meta?: ReactNode;
}) {
  return (
    <article className="ledger-row">
      <span className="ledger-row__index">{index}</span>
      <div>
        <h3>{title}</h3>
        {children ? <p>{children}</p> : null}
      </div>
      {meta ? <span className="ledger-row__meta">{meta}</span> : null}
    </article>
  );
}

export function DispatchLedger({
  rows,
}: {
  rows: Array<[string, string, string, string]>;
}) {
  return (
    <Ledger>
      {rows.map(([index, title, copy, meta]) => (
        <LedgerRow key={index} index={index} title={title} meta={meta}>
          {copy}
        </LedgerRow>
      ))}
    </Ledger>
  );
}