AG
Alek Gaming

Rooms Data - Copy this React, Tailwind Component to your project

Genera el frontend de una aplicación web para un sistema de reservas de hotel utilizando React y TailwindCSS. La aplicación debe incluir los siguientes componentes y vistas: 1. Componente de habitaciones (RoomsList): Muestra una lista de habitaciones en formato de tarjetas (cards). Cada tarjeta debe incluir: número de habitación, tipo (individual, doble, suite), precio por noche y estado (disponible, ocupada, en limpieza). Usa TailwindCSS para un diseño moderno y responsive. Si no hay habitaciones disponibles, muestra un mensaje: "No hay habitaciones disponibles". 2. Componente de reservas (ReservationsList): Muestra una tabla con las reservas actuales. Cada fila de la tabla debe incluir: nombre del cliente, número de habitación, fecha de inicio, fecha de fin, número de personas y costo total. Agrega estilos a la tabla usando TailwindCSS (bordes, sombreado y diseño responsive). Si no hay reservas, muestra un mensaje: "No hay reservas disponibles". 3. Componente de encabezado (Header): Incluye el nombre del hotel y un menú de navegación con enlaces a las vistas de "Habitaciones" y "Reservas". Usa TailwindCSS para un diseño limpio y responsive. 4. Estructura general: Configura React Router para manejar rutas entre /rooms (Habitaciones) y /reservations (Reservas). Asegúrate de que la aplicación sea completamente responsive usando TailwindCSS. 5. Extras: Implementa un diseño adaptable para dispositivos móviles y de escritorio. Usa datos estáticos en formato JSON para probar las funcionalidades de renderizado."

Prompt
Component Preview

About

roomsData - Display hotel rooms with details like type, price, and status in responsive cards. Built with React and Tailwind. Copy template now!

Share

Last updated 1 month ago