En esta clase, comenzamos a desarrollar el modal del buscador para nuestra interfaz, replicando la estructura y el comportamiento de Airbnb.

Estructura del Modal

El modal consta de las siguientes secciones principales:

• Cabecera: Contiene los botones de "Alojamientos" y "Experiencias".
• Cuerpo: Sección donde se seleccionan fechas, número de personas y ubicación.
• Pie: Botón para restablecer la búsqueda y otro para confirmar.

Para gestionar su visibilidad, utilizamos un estado que permite mostrar u ocultar el modal al hacer clic en el botón de búsqueda.

Implementación del Modal

1. Definimos el modal dentro de nuestra estructura principal y lo incluimos en el header.

2. Controlamos su visibilidad con una variable de estado que cambia al hacer clic en el botón de búsqueda.

3. Aplicamos clases de Tailwind CSS para el diseño y la disposición de los elementos:

   • absolute top-0 left-0 w-full h-full bg-white → Define la posición y el tamaño del modal.
   • flex flex-col → Organiza la cabecera, el contenido y el pie del modal.
   • justify-between → Asegura que las secciones se distribuyan correctamente.

Configuración de la Cabecera

La cabecera incluye opciones para alternar entre "Alojamientos" y "Experiencias". Implementamos esto con una variable de estado y aplicamos estilos según la opción seleccionada:

• Cuando una opción está activa, le aplicamos font-bold y un subrayado.
• Cuando está inactiva, se mantiene con un color más tenue (text-gray-400).
• Para la funcionalidad, usamos eventos que cambian la opción activa al hacer clic.

Diseño del Cuerpo del Modal

En el cuerpo del modal organizamos los campos:

• Ubicación: Sección donde el usuario ingresa el destino deseado.
• Fechas: Selector de fechas con opciones flexibles.
• Número de personas: Permite elegir entre adultos, niños y bebés.

Cada uno de estos elementos se estructurará utilizando flex, gap, padding y border para una apariencia más alineada con el diseño de Airbnb.

Implementación de la Sección "¿Dónde Quieres Ir?"

La sección de selección de destino cuenta con una tarjeta que agrupa:

• Título "¿Dónde quieres ir?"
• Campo de búsqueda
• Lista de destinos con desplazamiento horizontal

Diseño de la Tarjeta

Se aplica una tarjeta con los siguientes estilos:

• bg-white rounded-xl shadow-md para darle un aspecto limpio y elevado.
• px-6 py-4 para un espaciado adecuado.
• flex flex-col gap-4 para distribuir los elementos de forma ordenada.

Los destinos aparecen en una fila desplazable horizontalmente, con cada destino dentro de un botón que incluye una imagen y el nombre del destino.

Pie del Modal

La parte inferior contiene dos botones:

• Restablecer: Permite borrar los filtros aplicados.
• Buscar: Confirma la selección y ejecuta la búsqueda.

Estos botones se estilizan con:

• border rounded-full para mantener bordes suaves.
• px-6 py-3 para un tamaño cómodo.
• shadow-md para resaltar su apariencia.