Preferencias de cookies.

<form class="ui-sample ui-form" data-cookie-preferences="true"><h3>Preferencias de privacidad</h3><label><input type="checkbox" disabled="" checked=""/> Necesarias · sesión y seguridad</label><label><input type="checkbox" name="analitica"/> Analítica</label><label><input type="checkbox" name="terceros"/> Contenido de terceros</label><div class="ui-actions"><button class="btn btn--primary" type="submit">Guardar preferencias</button><button class="btn btn--secondary" type="reset">Rechazar opcionales</button></div></form>

<form class="ui-sample ui-form border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-cookie-preferences="true"><h3>Preferencias de privacidad</h3><label><input class="border border-slate-400 bg-white px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2" type="checkbox" disabled="" checked=""/> Necesarias · sesión y seguridad</label><label><input class="border border-slate-400 bg-white px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2" type="checkbox" name="analitica"/> Analítica</label><label><input class="border border-slate-400 bg-white px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2" type="checkbox" name="terceros"/> Contenido de terceros</label><div class="ui-actions"><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">Guardar preferencias</button><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="reset">Rechazar opcionales</button></div></form>

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

export interface CookiePreferencesOption {
  /** Categoría y, si hace falta, para qué se usa («Necesarias · sesión y seguridad»). */
  label: string;
  /** Nombre con que se envía la casilla; sin él, el formulario no la incluye. */
  name?: string;
  /** Valor enviado cuando la casilla está marcada; por defecto, `on`. */
  value?: string;
  /** Estado inicial de una casilla no controlada. */
  defaultChecked?: boolean;
  /** Estado de una casilla controlada; va junto con `onChange`. */
  checked?: boolean;
  /** Se llama al marcar o desmarcar la casilla, sea controlada o no. */
  onChange?: ChangeEventHandler<HTMLInputElement>;
  /** Categoría que no se puede desactivar, como las necesarias; va junto con `defaultChecked`. */
  disabled?: boolean;
}

export interface CookiePreferencesProps {
  title?: string;
  /** Una casilla por categoría; por defecto, las opcionales empiezan sin marcar. */
  options?: CookiePreferencesOption[];
  /** Texto del botón que envía el formulario; vacío lo oculta. */
  submitLabel?: string;
  /** Texto del botón de tipo `reset`, que vuelve las casillas a su estado inicial; vacío lo oculta. */
  rejectLabel?: string;
  /** Se llama al pulsar el botón de rechazo. Con casillas controladas, actualiza aquí su estado: el `reset` no dispara `onChange`. */
  onReject?: MouseEventHandler<HTMLButtonElement>;
  /** Destino del formulario; sin JavaScript, el envío va ahí. */
  action?: string;
  method?: "get" | "post";
  /** Se llama al enviar el formulario. */
  onSubmit?: FormEventHandler<HTMLFormElement>;
  className?: string;
}

const OPCIONES: CookiePreferencesOption[] = [
  { label: "Necesarias · sesión y seguridad", defaultChecked: true, disabled: true },
  { label: "Analítica", name: "analitica" },
  { label: "Contenido de terceros", name: "terceros" },
];

/**
 * Formulario de preferencias de cookies por categoría, con las necesarias fijas y las opcionales a elección de la persona.
 *
 * El botón de rechazo es de tipo `reset`: si las opcionales empiezan sin marcar, deja sólo las necesarias. Una casilla deshabilitada no se envía con el formulario.
 *
 * @example <CookiePreferences action="/privacidad/cookies" method="post" options={[{ label: "Necesarias · sesión y seguridad", defaultChecked: true, disabled: true }, { label: "Analítica", name: "analitica" }, { label: "Contenido de terceros", name: "terceros" }]} />
 * @example <CookiePreferences options={[{ label: "Necesarias · sesión y seguridad", defaultChecked: true, disabled: true }, { label: "Analítica", name: "analitica", checked: analitica, onChange: alternar }]} onSubmit={guardar} />
 */
export function CookiePreferences({
  title = "Preferencias de privacidad",
  options = OPCIONES,
  submitLabel = "Guardar preferencias",
  rejectLabel = "Rechazar opcionales",
  onReject,
  action,
  method,
  onSubmit,
  className,
}: CookiePreferencesProps) {
  return (
    <form className={["ui-form", className].filter(Boolean).join(" ")} data-cookie-preferences action={action} method={method} onSubmit={onSubmit}>
      {title ? <h3>{title}</h3> : null}
      {options.map((opcion, indice) => {
        const controlado = opcion.checked !== undefined && opcion.onChange !== undefined;
        return (
          <label key={`${opcion.label}-${indice}`}>
            <input
              type="checkbox"
              name={opcion.name}
              value={opcion.value}
              disabled={opcion.disabled}
              onChange={opcion.onChange}
              {...(controlado ? { checked: opcion.checked } : { defaultChecked: opcion.checked ?? opcion.defaultChecked })}
            />
            {` ${opcion.label}`}
          </label>
        );
      })}
      {submitLabel || rejectLabel ? (
        <div className="ui-actions">
          {submitLabel ? <button className="btn btn--primary" type="submit">{submitLabel}</button> : null}
          {rejectLabel ? <button className="btn btn--secondary" type="reset" onClick={onReject}>{rejectLabel}</button> : null}
        </div>
      ) : null}
    </form>
  );
}