Panel de información.

<aside class="ui-sample ui-map" data-map-info-panel="true"><header><strong>Santiago</strong><button class="btn btn--icon" type="button" aria-label="Cerrar información">×</button></header><dl><div><dt>Población</dt><dd>404.495</dd></div><div><dt>Superficie</dt><dd>22,4 km²</dd></div></dl><a class="btn btn--quiet" href="#ficha">Abrir ficha comunal</a><small>Fuente: INE, Censo 2017</small></aside>

<aside class="ui-sample ui-map border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-map-info-panel="true"><header class="flex flex-wrap items-center justify-between gap-3"><strong>Santiago</strong><button class="btn btn--icon border border-slate-950 px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed" type="button" aria-label="Cerrar información">×</button></header><dl class="grid gap-2"><div><dt>Población</dt><dd>404.495</dd></div><div><dt>Superficie</dt><dd>22,4 km²</dd></div></dl><a class="btn btn--quiet underline underline-offset-4" href="#ficha">Abrir ficha comunal</a><small class="text-sm text-slate-600">Fuente: INE, Censo 2017</small></aside>

import type { MouseEventHandler } from "react";

export interface MapInfoPanelItem {
  /** Nombre del dato (`<dt>`). */
  label: string;
  /** Valor ya formateado, con unidad si corresponde. */
  value: string;
}

export interface MapInfoPanelProps {
  /** Nombre del lugar seleccionado. */
  title?: string;
  /** Nombre accesible del botón de cerrar; vacío oculta el botón. */
  closeLabel?: string;
  onClose?: MouseEventHandler<HTMLButtonElement>;
  /** Datos del lugar como pares etiqueta y valor. */
  items?: MapInfoPanelItem[];
  /** Texto del enlace a la ficha completa del lugar; vacío lo oculta. */
  linkLabel?: string;
  /** Destino del enlace a la ficha. */
  href?: string;
  /** Origen de los datos, con su prefijo («Fuente: …»); vacío lo oculta. */
  source?: string;
  className?: string;
}

const DATOS: MapInfoPanelItem[] = [
  { label: "Población", value: "404.495" },
  { label: "Superficie", value: "22,4 km²" },
];

/**
 * Panel de información de un lugar seleccionado en el mapa: nombre, botón de cerrar, datos clave, enlace a la ficha completa y fuente.
 *
 * El botón de cerrar es un símbolo (`btn--icon`) con nombre accesible; el enlace a la ficha es una acción terciaria (`btn--quiet`). Cita en `source` el mismo año de los datos.
 *
 * @example <MapInfoPanel title="Maipú" items={[{ label: "Población", value: "521.627" }, { label: "Superficie", value: "135,5 km²" }]} href="/comunas/maipu" onClose={cerrar} />
 */
export function MapInfoPanel({
  title = "Santiago",
  closeLabel = "Cerrar información",
  onClose,
  items = DATOS,
  linkLabel = "Abrir ficha comunal",
  href = "#ficha",
  source = "Fuente: INE, Censo 2017",
  className,
}: MapInfoPanelProps) {
  return (
    <aside className={["ui-map", className].filter(Boolean).join(" ")} data-map-info-panel>
      {title || closeLabel ? (
        <header>
          {title ? <strong>{title}</strong> : null}
          {closeLabel ? <button className="btn btn--icon" type="button" aria-label={closeLabel} onClick={onClose}>×</button> : null}
        </header>
      ) : null}
      {items.length ? (
        <dl>
          {items.map((item, i) => (
            <div key={`${item.label}-${i}`}>
              <dt>{item.label}</dt>
              <dd>{item.value}</dd>
            </div>
          ))}
        </dl>
      ) : null}
      {linkLabel ? <a className="btn btn--quiet" href={href}>{linkLabel}</a> : null}
      {source ? <small>{source}</small> : null}
    </aside>
  );
}