Barra de Busqueda
Componente SearchBar usado en el directorio y la landing para buscar clinicas veterinarias.
SearchBar - Modo Navegacion
Modo por defecto. Al seleccionar ubicacion o filtros, navega automaticamente a /directorio con los query params correspondientes.
SearchBar - Modo Filtro
Modo filter: en vez de navegar, emite eventos al componente padre. Usado dentro de la pagina de directorio para filtrar en tiempo real.
Caracteristicas
Autocompletado de ubicacion
Busqueda con geocodificacion via API interna /api/geocode. Incluye opcion "Cerca de mi" con geolocalizacion GPS y fallback a IP.
Filtro de precio
Select con opciones predefinidas: Hasta $500, $1,000 o $2,000. Cambia de estilo cuando tiene un valor seleccionado (fondo navy).
Categorias de servicio
Chips scrollables: Consultas, Vacunacion, Estetica, Cirugias, Laboratorio y Dental. Toggle individual con estilo activo en navy.
Filtros especiales
Chips de "Urgencias" (rojo) y "Abierto ahora" (verde). Son independientes de la categoria seleccionada.
Props y Eventos
Props:
| Prop | Tipo | Default | Descripcion |
|---|---|---|---|
| mode | String | 'navigate' | 'navigate' o 'filter' |
| initialLocation | String | '' | Texto inicial del input de ubicacion |
| initialCategory | String | null | Categoria preseleccionada |
| initialMaxPrice | Number | null | Precio maximo inicial |
| initialEmergency | Boolean | false | Filtro de urgencias activo |
| initialOpenNow | Boolean | false | Filtro de "abierto ahora" activo |
Eventos (modo filter):
| Evento | Payload |
|---|---|
| location-selected | { lat, lng, zoom, displayName } | null |
| category-changed | String | null |
| price-changed | Number | null |
| emergency-toggled | Boolean |
| open-now-toggled | Boolean |
Layout Responsivo
Desktop (lg+): Todo en una sola linea - input de ubicacion, divider, chips scrollables y select de precio.
Movil (<lg): Dos filas - fila 1: input de ubicacion, fila 2: chips + precio.
El componente es sticky debajo del header usando top: var(--header-h).