Lanzador de aplicaciones.

<details class="ui-sample ui-app-launcher" data-app-launcher><summary class="btn btn--secondary">Aplicaciones</summary><nav aria-label="Aplicaciones de la Compañía"><a href="#datos"><strong>Datos</strong><span>Catálogo COCHID</span></a><a href="#documentos"><strong>Firmas y Documentos</strong><span>Contratos y archivo</span></a><a href="#inbox"><strong>Inbox</strong><span>Mensajería</span></a><a href="#mapa"><strong>Mapas</strong><span>Territorio</span></a></nav></details>

<details class="ui-sample ui-app-launcher border border-slate-300 bg-white p-4 text-slate-950" data-app-launcher><summary class="btn btn--secondary">Aplicaciones</summary><nav class="flex flex-wrap items-center gap-3" aria-label="Aplicaciones de la Compañía"><a class="underline underline-offset-4" href="#datos"><strong>Datos</strong><span>Catálogo COCHID</span></a><a class="underline underline-offset-4" href="#documentos"><strong>Firmas y Documentos</strong><span>Contratos y archivo</span></a><a class="underline underline-offset-4" href="#inbox"><strong>Inbox</strong><span>Mensajería</span></a><a class="underline underline-offset-4" href="#mapa"><strong>Mapas</strong><span>Territorio</span></a></nav></details>

import type { ReactEventHandler } from "react";

export interface AppLauncherItem {
  /** Nombre de la aplicación. */
  label: string;
  /** Dirección de la aplicación. */
  href: string;
  /** Línea breve bajo el nombre: qué se hace en la aplicación. */
  description?: string;
}

export interface AppLauncherProps {
  /** Texto del botón que abre el menú. */
  triggerLabel?: string;
  /** Nombre accesible de la lista de aplicaciones. */
  label?: string;
  /** Aplicaciones del menú, en orden; sin elementos no se muestra el menú. */
  items?: AppLauncherItem[];
  /** Muestra el menú abierto (atributo nativo `open` de `<details>`). */
  open?: boolean;
  /** Se llama al abrir o cerrar el menú (evento `toggle` de `<details>`). */
  onToggle?: ReactEventHandler<HTMLDetailsElement>;
  className?: string;
}

const APP_LAUNCHER_ITEMS: AppLauncherItem[] = [
  { label: "Datos", href: "#datos", description: "Catálogo COCHID" },
  { label: "Firmas y Documentos", href: "#documentos", description: "Contratos y archivo" },
  { label: "Inbox", href: "#inbox", description: "Mensajería" },
  { label: "Mapas", href: "#mapa", description: "Territorio" },
];

/**
 * Menú desplegable con enlaces a las otras aplicaciones de la organización, en la barra superior.
 *
 * Usa `<details>` nativo: abre y cierra sin JavaScript, y `open` lo muestra abierto desde el servidor.
 *
 * @example <AppLauncher items={[{ label: "Datos", href: "https://datos.example.cl", description: "Catálogo de datos" }]} />
 */
export function AppLauncher({
  triggerLabel = "Aplicaciones",
  label = "Aplicaciones de la Compañía",
  items = APP_LAUNCHER_ITEMS,
  open = false,
  onToggle,
  className,
}: AppLauncherProps) {
  if (!items.length) return null;
  return (
    <details className={["ui-app-launcher", className].filter(Boolean).join(" ")} data-app-launcher open={open} onToggle={onToggle}>
      <summary className="btn btn--secondary">{triggerLabel}</summary>
      <nav aria-label={label}>
        {items.map((item, i) => (
          <a key={i} href={item.href}>
            <strong>{item.label}</strong>
            {item.description ? <span>{item.description}</span> : null}
          </a>
        ))}
      </nav>
    </details>
  );
}