Creación del Modal de Búsqueda con Tailwind CSS

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.

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.

Próximos Pasos

En la siguiente clase, continuaremos trabajando en el modal, agregando más funcionalidades interactivas, como la selección de fechas y la cantidad de personas.