StatusBar

A bottom status bar showing connection state and contextual information.

Import

import { StatusBar } from "@gumtree/ui/layout/StatusBar";

Props

PropTypeDefaultDescription
connectedbooleantrueShow a green (connected) or red (disconnected) status dot
leftComponentChildren-Content for the left side, after the connection indicator
rightComponentChildren-Content for the right side

Examples

Connected

Status bar showing connected state with contextual info.

Connected@brendan · necessary-innovations
<StatusBar
  left={<span>@brendan · necessary-innovations</span>}
  right={
    <>
      <span>4 items need attention</span>
      <span class="w-px h-3 bg-[var(--text-ghost)] inline-block" />
      <span>8 repos · 1 org · 3 teams</span>
    </>
  }
/>

Disconnected

Status bar in disconnected state.

Disconnected
<StatusBar connected={false} />