Componentes
El frontend usa diseño atómico — los componentes se organizan en tres niveles de complejidad creciente.
Átomos (components/atoms/)
Componentes base sin dependencias internas. Son los bloques de construcción del sistema de diseño.
| Componente | Descripción |
|---|---|
Button | Botón base con variantes |
Container | Contenedor con max-width y padding |
Heading | Títulos (h1–h4) con estilos de fuente |
Eyebrow | Texto pequeño en mayúsculas para categorías |
CloudinaryImage | Imagen optimizada via Cloudinary |
ReservationStatusBadge | Badge de estado de reservación |
Moléculas (components/molecules/)
Compuestos de átomos. Resuelven un problema de UI específico.
| Componente | Descripción |
|---|---|
EventCard | Tarjeta de evento con imagen, título y CTA |
ReservationCard | Tarjeta de reservación con estado y detalles |
EmptyReservations | Estado vacío para la lista de reservaciones |
Organismos (components/organisms/)
Secciones completas de página. Pueden combinar múltiples moléculas y átomos, pero no importan otros organismos directamente.
| Componente | Descripción |
|---|---|
NavBar | Barra de navegación fija con estado de auth |
Footer | Pie de página |
HeroSection | Sección hero de la página principal |
EventsSection | Grid de eventos |
ReservationModal | Modal completo de reservación + pago PayPal |
ReservationListSkeleton | Skeleton de carga para lista de reservaciones |
Barrel exports
Cada nivel tiene un index.ts que re-exporta todos sus componentes:
// components/atoms/index.ts
export { Button } from "./Button";
export { Container } from "./Container";
// ...Al crear un componente nuevo:
- Crear el archivo en el nivel correspondiente
- Agregarlo al
index.tsde ese nivel - Importarlo siempre desde el barrel:
import { Button } from "@/components/atoms"
Convenciones de estilos
El sistema usa variables CSS definidas en app/globals.css:
--color-base /* Fondo principal */
--color-card /* Fondo de tarjetas */
--color-primary /* Texto primario */
--color-secondary /* Texto secundario */
--color-alt /* Bordes */Y clases de fuente configuradas en layout.tsx:
font-display— DM Serif Display (títulos)font-body— Jost (cuerpo de texto)
Last updated on