"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 (

communication / Interactive demo

Feedback collector

A feedback form with ratings, categories, validation, and submission confirmation.

{phase === "default" ? (

{children}

) : (

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

{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 Feedback01({ state = "default" }: { state?: BlockState }) { const [rating, setRating] = useState(0); const [category, setCategory] = useState("Suggestion"); const [message, setMessage] = useState(""); const [email, setEmail] = useState(""); const [submitted, setSubmitted] = useState(false); const [error, setError] = useState(""); return (

{submitted ? (

Thanks for helping us improve.

{category} · {rating}/5

{message}

Your feedback was saved in this demo session only. Connect a submission endpoint to deliver real feedback.

) : (

{ e.preventDefault(); if (!rating) { setError("Choose a rating before submitting."); return; } if (message.trim().length < 10) { setError("Please write at least 10 characters."); return; } setError(""); setSubmitted(true); }} >

How was your experience?

{[1, 2, 3, 4, 5].map((n) => ( setRating(n)} /> {n} ))}

1 = frustrating · 5 = excellent

Feedback type What should we know?

setMessage(e.target.value)}
                className={`${control} mt-2 w-full`}
                placeholder="Tell us what worked, or what got in your way."
              />
            </label>
            <p className="mt-1 text-right font-mono text-xs tabular-nums text-ledger-muted">
              {message.length}/1000
            </p>
            <label className="mt-5 block text-sm">
              Email for follow-up (optional)
              <input
                type="email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                className={`${control} mt-2 w-full`}
              />
            </label>
            {error && (
              <p role="alert" className="mt-4 text-sm">
                {error}
              </p>
            )}
            <button className={`${action} mt-5 w-full`}>
              Submit sample feedback
            </button>
          </form>
        )}
      </div>
    </Frame>
  );
}
</article></body></html>