Suscripción editorial.

<form class="ui-sample ui-content" data-newsletter-signup="true" action="#suscribir"><h3>Comentario por correo</h3><p>Una edición cuando exista algo que valga la pena leer.</p><label for="newsletter-0">Correo electrónico</label><input class="input" id="newsletter-0" type="email" autoComplete="email" required=""/><button class="btn btn--primary" type="submit">Suscribirme</button> <small>Incluye enlace para cancelar la suscripción.</small></form>

<form class="ui-sample ui-content border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-newsletter-signup="true" action="#suscribir"><h3>Comentario por correo</h3><p>Una edición cuando exista algo que valga la pena leer.</p><label for="newsletter-0">Correo electrónico</label><input class="input border border-slate-400 bg-white px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2" id="newsletter-0" type="email" autoComplete="email" required=""/><button class="btn btn--primary border border-slate-950 px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed" type="submit">Suscribirme</button> <small class="text-sm text-slate-600">Incluye enlace para cancelar la suscripción.</small></form>

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

export interface NewsletterSignupProps {
  /** Nombre del boletín o título del bloque. */
  title?: string;
  /** Qué recibe la persona y con qué frecuencia. */
  description?: string;
  /** Etiqueta visible del campo de correo. */
  label?: string;
  /** Id del campo de correo. Usa uno distinto por formulario en la página. */
  id?: string;
  /** Nombre del campo en el envío (`email`); sin él, el envío nativo no incluye el correo. */
  name?: string;
  /** Correo inicial de un campo no controlado. */
  defaultValue?: string;
  /** Correo de un campo controlado; va junto con `onChange`. */
  value?: string;
  onChange?: ChangeEventHandler<HTMLInputElement>;
  /** Destino del formulario; sin JavaScript, la suscripción se envía ahí. */
  action?: string;
  method?: "get" | "post";
  /** Texto del botón que envía la suscripción. */
  submitLabel?: string;
  /** Nota bajo el formulario: cómo cancelar o qué se hace con el correo. */
  help?: string;
  onSubmit?: FormEventHandler<HTMLFormElement>;
  className?: string;
}

/**
 * Formulario de suscripción a un boletín por correo, con título, descripción, campo de correo, botón y nota sobre cómo cancelar.
 *
 * Es un `<form>` nativo: sin JavaScript envía el correo a `action`, siempre que el campo tenga `name`.
 *
 * @example <NewsletterSignup id="boletin-portada" name="email" action="/boletin" method="post" />
 * @example <NewsletterSignup id="boletin-pie" name="email" title="Resumen semanal" description="Un correo cada lunes." />
 */
export function NewsletterSignup({
  title = "Comentario por correo",
  description = "Una edición cuando exista algo que valga la pena leer.",
  label = "Correo electrónico",
  id = "newsletter-0",
  name,
  defaultValue,
  value,
  onChange,
  action = "#suscribir",
  method,
  submitLabel = "Suscribirme",
  help = "Incluye enlace para cancelar la suscripción.",
  onSubmit,
  className,
}: NewsletterSignupProps) {
  const controlado = value !== undefined && onChange !== undefined;
  return (
    <form className={["ui-content", className].filter(Boolean).join(" ")} data-newsletter-signup action={action} method={method} onSubmit={onSubmit}>
      {title ? <h3>{title}</h3> : null}
      {description ? <p>{description}</p> : null}
      <label htmlFor={id}>{label}</label>
      <input
        className="input"
        id={id}
        name={name}
        type="email"
        autoComplete="email"
        required
        {...(controlado ? { value, onChange } : { defaultValue: value ?? defaultValue })}
      />
      <button className="btn btn--primary" type="submit">{submitLabel}</button>
      {help ? <>{" "}<small>{help}</small></> : null}
    </form>
  );
}