Компоненты

StatusBar

Нижняя полоса как в редакторах кода: сегменты по приоритету.

Нижняя полоса как в редакторах кода: сегменты, живые счётчики, состояние соединения. Достраивает AppShell снизу.

Пример

live

Сужайте полосу — сегменты уходят по возрастанию важности, связь остаётся.

<StatusBar
  segments={[
    { id: "branch", content: <>main</>, priority: 5 },
    { id: "conn", content: <LiveIndicator status="live" />, pinned: true, align: "right" },
    { id: "pos", content: <>Стр 42, Кол 8</>, priority: 1, align: "right" },
  ]}
/>

Пропсы

Проп	Тип	По умолчанию	Описание
`segments`*	`StatusBarSegment[]`	—	Сегменты: content, priority, pinned, align, onClick, tip.
`gap`	`number`	`12`	Зазор между сегментами (должен совпадать с CSS).

segments*StatusBarSegment[]

Сегменты: content, priority, pinned, align, onClick, tip.

gapnumber

по умолчанию: 12

Зазор между сегментами (должен совпадать с CSS).

Приоритеты при нехватке места

Раскладка отдельно

tsx

import { fitSegments, estimateWidth } from "@toimetdev/pathlogs-core";