"use client"; import { useState } from "react"; type BlockState = "default" | "loading" | "empty" | "error"; const control = "min-h-11 border border-ledger-rule bg-ledger-paper px-3 py-2 text-sm text-ledger-ink disabled:opacity-40"; const action = "min-h-11 border border-ledger-ink bg-ledger-ink px-4 py-2 text-sm font-semibold text-ledger-paper disabled:opacity-40"; function Frame({ state, children, }: { state: BlockState; children: React.ReactNode; }) { const [recovered, setRecovered] = useState(false); const phase = recovered ? "default" : state; return (

app / Interactive demo

Booking scheduler

An appointment flow with time zones, available slots, and confirmation.

{phase === "default" ? (

{children}

) : (

{phase === "loading" ? "Loading booking scheduler…" : phase === "empty" ? "No booking scheduler yet" : "Unable to load booking scheduler"}

{phase === "error" ? "Your work is safe. Try the sample again." : phase === "empty" ? "Start with sample data to explore this workflow." : "Preparing your workspace. You can load the sample now."}

{phase === "loading" && (

); } export function Booking01({ state = "default" }: { state?: BlockState }) { const [day, setDay] = useState("2026-09-15"); const [slot, setSlot] = useState(""); const [zone, setZone] = useState("UTC"); const [name, setName] = useState(""); const [email, setEmail] = useState(""); const [confirmed, setConfirmed] = useState(false); const times = [9, 11, 14, 16]; const format = (hour: number) => new Intl.DateTimeFormat("en-US", { hour: "numeric", minute: "2-digit", timeZone: zone, }).format(new Date(`${day}T${String(hour).padStart(2, "0")}:00:00Z`)); return ( {confirmed ? (

DEMO BOOKING CONFIRMED

You’re on the sample calendar, {name}.

{day} · {format(Number(slot))} · {zone}

No invitation was sent to {email}. Connect your booking service to send real invitations.

) : (

{ e.preventDefault(); if (slot) setConfirmed(true); }} >

Product walkthrough

30 minutes · Video call · Sample availability

Date Time zone

Available times

{times.map((t) => ( ))}

Your name setName(e.target.value)} autoComplete="name" className={`${control} mt-2 w-full`} /> Email setEmail(e.target.value)} autoComplete="email" className={`${control} mt-2 w-full`} />

Select a time to continue. This demo does not reserve a real appointment.

)} ); }