Componentes
Cubes

BookingCube

Feature vertical de reserva: flujo + máquina de estados + adapter.

Flujo de reserva completo

Vista previa

Elige un servicio

// app/reservar/actions.ts — el PUERTO, como Server Actions sobre Drizzle.
// El cube nunca hace I/O: define el contrato, tú lo implementas. Todo lo que
// devuelve es serializable, así cruza el borde Server→Client sin fricción.
"use server";
export async function getAvailability({ date, service }) {
  return db.select().from(slots).where(/* … día + servicio */); // → BookingSlot[]
}
export async function createBooking(request) {
  return db.insert(bookings).values(request).returning(); // persiste/cobra/notifica
}

// app/reservar/page.tsx — Server Component: prefetch + prefill de sesión.
import { BookingCube } from "@eidondev/acme-ui/cubes";
import { getAvailability, createBooking } from "./actions";

const services = await db.select().from(servicesTable);   // prefetch en el server
const session = await auth.api.getSession();              // better-auth

<BookingCube
  services={services}
  adapter={{ getAvailability, createBooking }}            // server actions
  defaultCustomer={{ name: session?.user.name, email: session?.user.email }}
  locale="es-CL"
  timeZone="America/Santiago"
/>

// Headless si quieres otra piel: const { state, actions } = useBooking({ adapter })

Comparación de temas

El mismo componente bajo distintos modos y marcas. No cambia el componente — solo los tokens (CSS variables) del contenedor.
Legacy · claro

Elige un servicio

Editorial · claro

Elige un servicio

Technical · oscuro

Elige un servicio

Warm · claro

Elige un servicio

Playful · claro

Elige un servicio