Cuenta y sesión.

<div class="ui-sample ui-account ui-actions" data-account-menu><a class="btn btn--quiet" href="#ingresar">Iniciar sesión</a><a class="btn btn--primary" href="#crear-cuenta">Crear cuenta</a></div>

<div class="ui-sample ui-account ui-actions border border-slate-300 bg-white p-4 text-slate-950" data-account-menu><a class="btn btn--quiet underline underline-offset-4" href="#ingresar">Iniciar sesión</a><a class="btn btn--primary underline underline-offset-4" href="#crear-cuenta">Crear cuenta</a></div>

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

export interface AccountMenuItem {
  label: string;
  href: string;
  /** Marca la página actual con `aria-current="page"`. */
  current?: boolean;
}

const ITEMS: AccountMenuItem[] = [
  { label: "Perfil", href: "#perfil" },
  { label: "Facturación", href: "#facturacion" },
];

export interface AccountMenuProps {
  /** Nombre de la persona con sesión iniciada; sin él, se muestran los enlaces para ingresar y crear cuenta. */
  userName?: string;
  /** Muestra el menú de la cuenta desplegado (atributo nativo `open` de `<details>`). */
  open?: boolean;
  /** Se llama al abrir o cerrar el menú con sesión iniciada. */
  onToggle?: ReactEventHandler<HTMLDetailsElement>;
  /** Destino del enlace para ingresar; se usa sin sesión. */
  loginHref?: string;
  /** Texto del enlace para ingresar; se usa sin sesión. */
  loginLabel?: string;
  /** Destino para crear cuenta; vacío, no se muestra el enlace. */
  signupHref?: string;
  /** Texto del enlace para crear cuenta; se usa sin sesión. */
  signupLabel?: string;
  /** Encabezado del menú con sesión iniciada; vacío, no se muestra. */
  title?: string;
  /** Enlaces del menú con sesión iniciada, en orden. */
  items?: AccountMenuItem[];
  /** Nombre accesible del menú con sesión iniciada (`aria-label`). */
  label?: string;
  /** Destino del formulario `POST` que cierra la sesión. */
  logoutAction?: string;
  /** Se llama al enviar el formulario de cierre de sesión. */
  onLogout?: FormEventHandler<HTMLFormElement>;
  /** Texto del botón que cierra la sesión; se usa con sesión iniciada. */
  logoutLabel?: string;
  className?: string;
}

/**
 * Acceso a la cuenta en la cabecera: enlaces para ingresar y crear cuenta sin sesión, o menú de la cuenta con sesión iniciada.
 *
 * El estado llega por `userName`. El menú usa `<details>` y abre sin JavaScript; el cierre de sesión es un formulario `POST` y `onLogout` recibe el envío.
 *
 * @example <AccountMenu loginHref="/ingresar" signupHref="/crear-cuenta" />
 * @example <AccountMenu userName="Martín Illanes" logoutAction="/salir" onLogout={cerrarSesion} items={[{ label: "Perfil", href: "/perfil" }]} />
 */
export function AccountMenu({
  userName,
  open = false,
  onToggle,
  loginHref = "#ingresar",
  loginLabel = "Iniciar sesión",
  signupHref = "#crear-cuenta",
  signupLabel = "Crear cuenta",
  title = "Cuenta de la Compañía",
  items = ITEMS,
  label = "Cuenta",
  logoutAction = "#cerrar-sesion",
  onLogout,
  logoutLabel = "Cerrar sesión",
  className,
}: AccountMenuProps) {
  if (!userName) {
    return (
      <div className={["ui-account ui-actions", className].filter(Boolean).join(" ")} data-account-menu>
        <a className="btn btn--quiet" href={loginHref}>{loginLabel}</a>
        {signupHref ? <a className="btn btn--primary" href={signupHref}>{signupLabel}</a> : null}
      </div>
    );
  }
  return (
    <details className={["ui-account", className].filter(Boolean).join(" ")} data-account-menu open={open} onToggle={onToggle}>
      <summary className="btn btn--secondary">{userName}</summary>
      <nav aria-label={label}>
        {title ? <strong>{title}</strong> : null}
        {items.map((item, i) => (
          <a key={i} href={item.href} aria-current={item.current ? "page" : undefined}>{item.label}</a>
        ))}
        <form action={logoutAction} method="post" onSubmit={onLogout}>
          <button type="submit">{logoutLabel}</button>
        </form>
      </nav>
    </details>
  );
}