LogStream

import { LogStream } from "@grassroot/ui-react/advanced";
 
const source = [
  { level: "INFO", message: "GET /v2/ledger/entries 200 · 42ms" },
  { level: "WARN", message: "retry queue depth 12 - approaching threshold" },
  { level: "ERR", message: "analytics-ingest connection refused · retrying" },
];
 
<LogStream source={source} title="ledger-api · production" />

<script setup lang="ts">
import { LogStream } from "@grassroot/ui-vue";
 
const source = [
  { level: "INFO", message: "GET /v2/ledger/entries 200 · 42ms" },
  { level: "WARN", message: "retry queue depth 12 - approaching threshold" },
  { level: "ERR", message: "analytics-ingest connection refused · retrying" },
];
</script>
 
<template>
  <LogStream :source="source" title="ledger-api · production" />
</template>

import { Component } from "@angular/core";
import { GrassrootLogStream } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-example",
  standalone: true,
  imports: [GrassrootLogStream],
  template: `
    <grassroot-log-stream [source]="source" title="ledger-api · production" />
  `,
})
export class ExampleComponent {
  readonly source = [
    { level: "INFO", message: "GET /v2/ledger/entries 200 · 42ms" },
    { level: "WARN", message: "retry queue depth 12 - approaching threshold" },
    { level: "ERR", message: "analytics-ingest connection refused · retrying" },
  ];
}

<script lang="ts">
  import { LogStream } from "@grassroot/ui-svelte";
 
  const source = [
    { level: "INFO", message: "GET /v2/ledger/entries 200 · 42ms" },
    { level: "WARN", message: "retry queue depth 12 - approaching threshold" },
    { level: "ERR", message: "analytics-ingest connection refused · retrying" },
  ];
</script>
 
<LogStream source={source} title="ledger-api · production" />

import { LogStream } from "@grassroot/ui-solid";
 
const source = [
  { level: "INFO", message: "GET /v2/ledger/entries 200 · 42ms" },
  { level: "WARN", message: "retry queue depth 12 - approaching threshold" },
  { level: "ERR", message: "analytics-ingest connection refused · retrying" },
];
 
export function Example() {
  return (
    <>
      <LogStream source={source} title="ledger-api · production" />
    </>
  );
}