1 files changed, 144 insertions, 0 deletions
diff --git a/quickshell/modules/bar/Time.qml b/quickshell/modules/bar/Time.qml
new file mode 100644
index 0000000..dfa3f0d
--- /dev/null
+++ b/quickshell/modules/bar/Time.qml
@@ -0,0 +1,144 @@
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import "../../config.js" as Config
+
+Rectangle {
+    id: clockBlock
+
+    implicitWidth: timeText.contentWidth + Config.blockPadding
+    implicitHeight: Config.blockHeight
+
+    radius: Config.blockRadius
+
+    property bool alternateFormat: false
+
+    gradient: Gradient {
+        GradientStop {
+            id: stop1
+            position: 0.0
+            color: Config.accentGreen
+        }
+
+        GradientStop {
+            id: stop2
+            position: 0.33
+            color: Config.accentYellow
+        }
+
+        GradientStop {
+            id: stop3
+            position: 0.66
+            color: Config.accentOrange
+        }
+
+        GradientStop {
+            id: stop4
+            position: 1.0
+            color: Config.accentRed
+        }
+    }
+
+    SystemClock {
+        id: clock
+        precision: SystemClock.Seconds
+    }
+
+    Text {
+        id: timeText
+
+        anchors.centerIn: parent
+
+        text: alternateFormat
+            ? Qt.formatDateTime(clock.date, "󱑃  dddd, dd MMMM yyyy")
+            : Qt.formatDateTime(clock.date, "  hh:mm AP • ddd, dd/MM")
+
+        color: Config.textDark
+        font.family: Config.fontFamily
+        font.pixelSize: Config.fontSize
+        font.bold: true
+    }
+
+    MouseArea {
+        anchors.fill: parent
+
+        cursorShape: Qt.PointingHandCursor
+
+        onClicked: {
+            alternateFormat = !alternateFormat
+        }
+    }
+
+    SequentialAnimation {
+        running: true
+        loops: Animation.Infinite
+
+        ParallelAnimation {
+            ColorAnimation {
+                target: stop1
+                property: "color"
+                from: Config.accentGreen
+                to: Config.accentRed
+                duration: Config.gradientAnimationDuration
+            }
+
+            ColorAnimation {
+                target: stop2
+                property: "color"
+                from: Config.accentYellow
+                to: Config.accentGreen
+                duration: Config.gradientAnimationDuration
+            }
+
+            ColorAnimation {
+                target: stop3
+                property: "color"
+                from: Config.accentOrange
+                to: Config.accentYellow
+                duration: Config.gradientAnimationDuration
+            }
+
+            ColorAnimation {
+                target: stop4
+                property: "color"
+                from: Config.accentRed
+                to: Config.accentOrange
+                duration: Config.gradientAnimationDuration
+            }
+        }
+
+        ParallelAnimation {
+            ColorAnimation {
+                target: stop1
+                property: "color"
+                from: Config.accentRed
+                to: Config.accentGreen
+                duration: Config.gradientAnimationDuration
+            }
+
+            ColorAnimation {
+                target: stop2
+                property: "color"
+                from: Config.accentGreen
+                to: Config.accentYellow
+                duration: Config.gradientAnimationDuration
+            }
+
+            ColorAnimation {
+                target: stop3
+                property: "color"
+                from: Config.accentYellow
+                to: Config.accentOrange
+                duration: Config.gradientAnimationDuration
+            }
+
+            ColorAnimation {
+                target: stop4
+                property: "color"
+                from: Config.accentOrange
+                to: Config.accentRed
+                duration: Config.gradientAnimationDuration
+            }
+        }
+    }
+}