Open in a new tab
View code
tsx
<EventTicker
	aria-label="Recent checkout checks, newest first"
	pauseLabel="Pause the animation"
	title="Checkout, every 5 minutes"
	statusLabels={{ ok: "Passed", warn: "Slow", fail: "Failed", pending: "Running" }}
	rows={[
		{ time: "09:25", label: "Checkout", status: "ok", detail: "4 steps in 1.2s" },
		{ time: "09:30", label: "Checkout", status: "warn", detail: "Pay took 3.8s" },
		{
			time: "09:35",
			label: "Checkout failed at Pay",
			status: "fail",
			code: "POST /api/pay → 502",
		},
		{ time: "09:40", label: "Checkout", status: "ok", detail: "4 steps in 1.1s" },
		{
			time: "09:45",
			label: "Checkout",
			status: "pending",
			detail: "Step 2 of 4",
			flipTo: { status: "ok", detail: "4 steps in 1.3s" },
		},
	]}
	footnote="A failure pages the on-call with the step that broke"
/>