ステータスバーStatusBarExperimental

import { StatusBar } from "@gunjo/ui"

export function EditorStatusBar() {
  return (
    <div className="w-full max-w-[720px] overflow-hidden rounded-lg border bg-background">
      <div className="border-b bg-muted/40 px-4 py-2 text-sm font-medium">
        記事エディタ
      </div>
      <div className="grid min-h-40 grid-cols-1 text-sm sm:grid-cols-[160px_1fr]">
        <aside className="border-r bg-muted/20 p-3 text-muted-foreground">
          下書き / 公開設定 / 履歴
        </aside>
        <main className="space-y-3 p-4">
          <div className="h-4 w-2/3 rounded bg-muted" />
          <div className="h-3 w-full rounded bg-muted/70" />
          <div className="h-3 w-5/6 rounded bg-muted/70" />
        </main>
      </div>
      <StatusBar
        fixed={false}
        className="w-full"
        leftNode={<span>保存済み</span>}
        rightNode={<span>UTF-8</span>}
      >
        <span>バックグラウンド処理なし</span>
      </StatusBar>
    </div>
  )
}