Edición en línea.

<div class="ui-sample ui-inline-edit" data-inline-edit="true"><div><strong>Título del dataset</strong><span>Empleo regional</span></div><button class="btn btn--secondary" type="button">Editar</button></div>

<div class="ui-sample ui-inline-edit border border-slate-300 bg-white p-4 text-slate-950" data-inline-edit="true"><div><strong>Título del dataset</strong><span>Empleo regional</span></div><button class="btn btn--secondary border border-slate-950 px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed" type="button">Editar</button></div>

import type { ChangeEventHandler, FormEventHandler, MouseEventHandler } from "react";

export interface InlineEditProps {
  /** Muestra el formulario de edición en vez del valor. */
  editing?: boolean;
  /** Nombre del dato: título en la vista y etiqueta en la edición. */
  label?: string;
  /** Id del campo en la edición. Usa uno distinto por dato en la página. */
  id?: string;
  /** Nombre del campo en el envío; sin él, un formulario con `action` no manda el valor. */
  name?: string;
  /** Valor actual; en la edición es el valor inicial de un campo no controlado. */
  defaultValue?: string;
  /** Valor de un campo controlado; va junto con `onChange`. */
  value?: string;
  onChange?: ChangeEventHandler<HTMLInputElement>;
  /** Texto del botón que abre la edición. */
  editLabel?: string;
  onEdit?: MouseEventHandler<HTMLButtonElement>;
  saveLabel?: string;
  cancelLabel?: string;
  onCancel?: MouseEventHandler<HTMLButtonElement>;
  /** Destino del formulario de edición; sin JavaScript, el guardado va ahí. */
  action?: string;
  method?: "get" | "post";
  onSubmit?: FormEventHandler<HTMLFormElement>;
  className?: string;
}

/**
 * Dato con su valor y un botón para editarlo en el mismo lugar, sin ir a otra pantalla; se usa en fichas y tablas de metadatos.
 *
 * Con `editing`, el dato pasa a ser un formulario con campo, guardar y cancelar; quien lo usa decide cuándo abrirlo y cerrarlo.
 *
 * @example <InlineEdit label="Título del dataset" defaultValue="Empleo regional" onEdit={abrir} />
 * @example <InlineEdit id="titulo" editing defaultValue="Empleo regional" onSubmit={guardar} onCancel={cerrar} />
 */
export function InlineEdit({
  editing = false,
  label = "Título del dataset",
  id = "inline-edit-0",
  name,
  defaultValue = "Empleo regional",
  value,
  onChange,
  editLabel = "Editar",
  onEdit,
  saveLabel = "Guardar",
  cancelLabel = "Cancelar",
  onCancel,
  action,
  method,
  onSubmit,
  className,
}: InlineEditProps) {
  const clase = ["ui-inline-edit", className].filter(Boolean).join(" ");
  if (!editing) {
    const actual = value ?? defaultValue;
    return (
      <div className={clase} data-inline-edit>
        <div>
          <strong>{label}</strong>
          {actual ? <span>{actual}</span> : null}
        </div>
        <button className="btn btn--secondary" type="button" onClick={onEdit}>{editLabel}</button>
      </div>
    );
  }
  const controlado = value !== undefined && onChange !== undefined;
  return (
    <form className={clase} data-inline-edit action={action} method={method} onSubmit={onSubmit}>
      <label htmlFor={id}>{label}</label>
      <input className="input" id={id} name={name} {...(controlado ? { value, onChange } : { defaultValue: value ?? defaultValue })} />
      <div className="ui-actions">
        <button className="btn btn--primary" type="submit">{saveLabel}</button>
        <button className="btn btn--secondary" type="button" onClick={onCancel}>{cancelLabel}</button>
      </div>
    </form>
  );
}