Búsqueda en mapa.

<form class="ui-sample ui-form" data-map-search><label for="map-search-0">Buscar lugar</label><input class="input" id="map-search-0" value="Santiago"><button class="btn btn--primary" type="submit">Buscar</button><p>Comuna de Santiago, Región Metropolitana</p><small>Fuente: geocodificador oficial</small></form>

<form class="ui-sample ui-form border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-map-search><label for="map-search-0">Buscar lugar</label><input class="input border border-slate-400 bg-white px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2" id="map-search-0" value="Santiago"><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">Buscar</button><p>Comuna de Santiago, Región Metropolitana</p><small class="text-sm text-slate-600">Fuente: geocodificador oficial</small></form>

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

export interface MapSearchProps {
  /** Etiqueta visible del campo. */
  label?: string;
  /** Id del campo. Usa uno distinto por búsqueda en la página. */
  id?: string;
  /** Nombre del parámetro de la consulta (por ejemplo `q`); sin él, el formulario no envía el texto. */
  name?: string;
  /** Destino del formulario; sin JavaScript, la búsqueda navega ahí. */
  action?: string;
  /** Texto inicial de un campo no controlado. */
  defaultValue?: string;
  /** Texto de un campo controlado; va junto con `onChange`. */
  value?: string;
  /** Se llama con cada cambio del texto, también en un campo no controlado. */
  onChange?: ChangeEventHandler<HTMLInputElement>;
  placeholder?: string;
  /** Texto del botón que envía la búsqueda. */
  submitLabel?: string;
  /** Resultado de la búsqueda: el lugar encontrado o el número de coincidencias; vacío lo oculta. */
  result?: string;
  /** Origen de los resultados, con su prefijo («Fuente: …»); vacío lo oculta. */
  source?: string;
  onSubmit?: FormEventHandler<HTMLFormElement>;
  className?: string;
}

/**
 * Buscador para ubicar un lugar en un mapa por su nombre o dirección: campo con etiqueta, botón, el lugar encontrado o el número de coincidencias, y la fuente del geocodificador.
 *
 * Es un `<form>`: con `name`, sin JavaScript envía la consulta a `action`.
 *
 * @example <MapSearch id="buscar-lugar" name="q" action="/mapa" defaultValue="Maipú" result="Comuna de Maipú, Región Metropolitana" />
 * @example <MapSearch id="buscar-lugar" value={consulta} onChange={escribir} result="3 coincidencias" />
 */
export function MapSearch({
  label = "Buscar lugar",
  id = "map-search-0",
  name,
  action,
  defaultValue = "Santiago",
  value,
  onChange,
  placeholder,
  submitLabel = "Buscar",
  result = "Comuna de Santiago, Región Metropolitana",
  source = "Fuente: geocodificador oficial",
  onSubmit,
  className,
}: MapSearchProps) {
  const controlado = value !== undefined && onChange !== undefined;
  return (
    <form className={["ui-form", className].filter(Boolean).join(" ")} data-map-search action={action} onSubmit={onSubmit}>
      {label ? <label htmlFor={id}>{label}</label> : null}
      <input
        className="input"
        id={id}
        name={name}
        placeholder={placeholder}
        onChange={onChange}
        {...(controlado ? { value } : { defaultValue: value ?? defaultValue })}
      />
      <button className="btn btn--primary" type="submit">{submitLabel}</button>
      {result ? <p>{result}</p> : null}
      {source ? <small>{source}</small> : null}
    </form>
  );
}