LogViewer

Admin / developer log viewer with level filter, text search, copy, and optional auto-scroll.

#Default usage

<LogViewer
  height={220}
  lines={[
    { level: "info", message: "Build started", timestamp: "01:00:00" },
    { level: "info", message: "Compiling sources", timestamp: "01:00:01" },
    { level: "warn", message: "Cache stale, rebuilding", timestamp: "01:00:03" },
    { level: "success", message: "Build completed", timestamp: "01:00:09" }
  ]}
/>

#Import

import { LogViewer, type LogLevel, type LogLine } from "@froggdesign/enter-ui-react";

#Accessibility

Viewport is role="log". Each row is a labelled list item with the level chip duplicated as text so colour is not the only cue.

#API

• lines: LogLine[] with level, message, optional timestamp, meta (object or string).
• level + onLevelChange: control the level filter.
• search + onSearchChange: control the search query.
• autoScroll: scroll to the latest line as new lines arrive.
• height: viewport height in px.
• hideToolbar: render only the viewport.

#Styling

Every exported component accepts className. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.