En esta clase, continuamos desarrollando el modal del buscador, enfocándonos en la sección de selección de fechas.

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.

Implementación de la Selección de Fechas

La sección de selección de fechas incluye tres pestañas:

• Fechas específicas
• Meses
• Flexible

Diseño de las Pestañas

• Se organiza con grid grid-cols-3 para que cada opción tenga el mismo ancho.
• Se aplica text-center font-semibold para mejorar la legibilidad.
• Se usa border border-gray-300 rounded-full para dar la apariencia de botones.

Cada pestaña alterna su contenido dinámicamente, mostrando las opciones de calendario correspondientes.

Configuración del Selector de Fechas

• Se muestra un calendario donde los usuarios pueden seleccionar fechas específicas.
• Se implementa un diseño con grid grid-cols-7 para simular un calendario.
• Se destacan los días seleccionados con bg-gray-200 rounded-lg.

Opciones de Estancia Flexible

• Se incluyen botones para seleccionar "Fin de semana", "Semana completa" o "Mes completo".
• Cada opción se resalta con border border-gray-400 rounded-lg px-4 py-2.
• Se usa text-gray-600 para mantener la coherencia con el diseño.

Pie del Modal

La parte inferior contiene dos botones:

• Omitir: Permite saltar la selección de fechas.
• Siguiente: Avanza a la selección de número de personas.

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.