Streaming Status Bar

1"use client";
2
3import { useState } from "react";
4import { StreamingStatusBar } from "@/registry/ui/streaming-status-bar";
5
6export function StreamingStatusBarDefaultExample() {
7  const [isComplete, setIsComplete] = useState(false);
8  const [isPaused, setIsPaused] = useState(false);
9
10  return (
11    <div className="w-full max-w-xl space-y-4">
12      <StreamingStatusBar
13        isComplete={isComplete}
14        isPaused={isPaused}
15        onTogglePause={() => setIsPaused((p) => !p)}
16      />
17      <div className="flex gap-2">
18        <button
19          type="button"
20          className="rounded-md border px-3 py-1.5 text-sm"
21          onClick={() => {
22            setIsComplete(false);
23            setIsPaused(false);
24          }}
25        >
26          Streaming
27        </button>
28        <button
29          type="button"
30          className="rounded-md border px-3 py-1.5 text-sm"
31          onClick={() => setIsComplete(true)}
32        >
33          Complete
34        </button>
35      </div>
36    </div>
37  );
38}