Modularize the calendar widget

2024-07-02 21:48:59 -07:00
parent 651d2f2e86
commit 5846470441
4 changed files with 383 additions and 375 deletions
--- a/modules/menus/calendar/time/index.js
+++ b/modules/menus/calendar/time/index.js
@@ -0,0 +1,45 @@
+const time = Variable("", {
+  poll: [1000, 'date "+%I:%M:%S"'],
+});
+
+const period = Variable("", {
+  poll: [1000, 'date "+%p"'],
+});
+
+const TimeWidget = () => {
+  return Widget.Box({
+    class_name: "calendar-menu-item-container clock",
+    hexpand: true,
+    vpack: "center",
+    hpack: "fill",
+    child: Widget.Box({
+      hexpand: true,
+      vpack: "center",
+      hpack: "center",
+      class_name: "clock-content-items",
+      children: [
+        Widget.Box({
+          hpack: "center",
+          children: [
+            Widget.Label({
+              class_name: "clock-content-time",
+              label: time.bind(),
+            }),
+          ],
+        }),
+        Widget.Box({
+          hpack: "center",
+          children: [
+            Widget.Label({
+              vpack: "end",
+              class_name: "clock-content-period",
+              label: period.bind(),
+            }),
+          ],
+        }),
+      ],
+    }),
+  });
+};
+
+export { TimeWidget };