署名記録SignedRecordBeta

import * as React from "react";
import { SignedRecord, Textarea, type SignedRecordValue } from "@gunjo/ui";

export function DischargeRecord() {
  const [record, setRecord] = React.useState<SignedRecordValue>({ status: "draft", addenda: [] });
  const [body, setBody] = React.useState("退院時説明を実施。次回外来は7月10日。");
  const canSign = body.trim().length > 0;

  return (
    <div className="w-full max-w-xl rounded-lg border bg-card p-4">
      <SignedRecord
        value={record}
        onChange={setRecord}
        signerId="医師 山田"
        canSign={canSign}
        cannotSignReason="記録本文を入力すると署名できます。"
        formatTime={(iso) => iso.slice(0, 16).replace("T", " ")}
      >
        {({ readOnly }) =>
          readOnly ? (
            <p className="whitespace-pre-wrap rounded-md border bg-muted/30 px-3 py-2 text-sm leading-6 text-foreground">
              {body}
            </p>
          ) : (
            <Textarea
              rows={3}
              value={body}
              onChange={(event) => setBody(event.target.value)}
              placeholder="記録本文を入力"
              aria-label="記録本文"
            />
          )
        }
      </SignedRecord>
    </div>
  );
}