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