Thirty-tick history strip in the style of a status page, with pass, slow, and fail segments and a rolling availability number.
The import and the props worth knowing about, in one place.
import { Monitoring4 } from "@/components/beste/piece/monitoring4";
<Monitoring4
surface="card"
bordered={false}
inverted={false}
endpoint="auth.beste.co"
history={[
"ok",
"ok",
"ok",
"ok",
"ok",
"ok",
"ok",
"slow",
"ok",
"ok",
"ok",
"ok",
"ok",
"ok",
"ok",
"ok",
"fail",
"ok",
"ok",
"ok",
"ok",
"ok",
"slow",
"ok",
"ok",
"ok",
"ok",
"ok",
"ok",
"ok"
]}
uptime="99.92%"
/>