Add showing level of value through bar

quickshell/ui/TopBar.qml

@@ -16,6 +16,7 @@ Item {
 
     property int cpuUsage: 0
     property int memUsage: 0
+    property int gpuUsage: 0
 
     RowLayout {
         anchors.fill: parent
@@ -71,35 +72,31 @@ Item {
         RowLayout {
             spacing: 10
 
-            //TODO put this in separate component
-            Text {
-                id: cpuText
-                text: "CPU: " + cpuUsage + "%"
-                color: Constants.colYellow
-                font.pixelSize: Constants.fontSize
-                font.family: Constants.fontFamily
-                font.bold: true
+            BarText {
+                prefix: "C"
+                value: cpuUsage
             }
 
             Rectangle {
                 width: 1
                 height: 16
-                color: Constants.colMuted
+                color: Colors.md3.on_background
             }
 
-            Text {
-                id: memText
-                text: "Mem: " + memUsage + "%"
-                color: Constants.colCyan
-                font.pixelSize: Constants.fontSize
-                font.family: Constants.fontFamily
-                font.bold: true
+            BarText {
+                prefix: "M"
+                value: memUsage
             }
 
             Rectangle {
                 width: 1
                 height: 16
-                color: Constants.colMuted
+                color: Colors.md3.on_background
+            }
+
+            BarText {
+                prefix: "G"
+                value: gpuUsage
             }
 
             Clock {}