Log Stream

About this piece

Timestamped log lines tagged by level in info, warn, error, and ok colors.

Usage

The import and the props worth knowing about, in one place.

import { Terminal7 } from "@/components/beste/piece/terminal7";

<Terminal7
  logs={[
    {
      "time": "12:04:01",
      "level": "ok",
      "message": "Server ready on port 3000"
    },
    {
      "time": "12:04:03",
      "level": "info",
      "message": "Compiled /dashboard in 240ms"
    },
    {
      "time": "12:04:06",
      "level": "warn",
      "message": "Slow query took 412ms"
    },
    {
      "time": "12:04:09",
      "level": "error",
      "message": "Failed to reach cache"
    }
  ]}
/>

More Terminal pieces

View all Terminal

beste-web / production

09:14:02Cloning repository main@8f2c1d

Deploy Log

Streaming build log where timestamped lines append every half second and older ones slide up out of view, with warnings in amber and successes in green until the deploy lands.

$npx beste-ui@latest init

Terminal Prompt

Dark shell line with an emerald prompt, command text, and a blinking block cursor.

renders the label

fires onClick

respects disabled state

2 passed1 failed1.24s

Test Summary

Test run output with pass and fail markers and a totals bar.

components/Button.tsx

function Button({ label }) {

return <button>{label}</button>;

return <button className="btn">{label}</button>;

}

Diff Block

Unified diff with added and removed lines tinted green and red.

deploy

$beste deploy --prod

Building application…Uploading assets…Deployed in 4.2s

Output Window

Window-chrome shell showing a command and its output ending in a success line.

Installing packagesctrl-c to cancel

Loading Line

Single indeterminate line with a spinner and a cancel hint.