ags-config/widget/Bar.tsx

import { App, Astal, Gtk, Gdk, } from "astal/gtk4"
import Workspaces from "./workspaces"
import Systray from "./systray"
import Battery from "./battery"
import Time from "./time"


export default function Bar(gdkmonitor: Gdk.Monitor) {
  const { TOP, LEFT, RIGHT } = Astal.WindowAnchor

  return <window
    visible
    cssClasses={["Bar"]}
    gdkmonitor={gdkmonitor}
    exclusivity={Astal.Exclusivity.EXCLUSIVE}
    anchor={TOP | LEFT | RIGHT}
    application={App}>
    <centerbox>
      <box hexpand halign={Gtk.Align.START}>
        <Battery />
      </box>
      <box hexpand halign={Gtk.Align.CENTER}>
        <Workspaces />
      </box>
      <box hexpand halign={Gtk.Align.END}>
        <Time />
        <Systray />
      </box>

    </centerbox>
  </window>
}