-

ui/components/empty.slint

@@ -0,0 +1,40 @@
+// Empty state component - Shows when no data is available
+import { Theme, Typography, SpacingSystem } from "../theme/theme.slint";
+
+export component Empty inherits Rectangle {
+    in property <string> icon: "📭";
+    in property <string> title: "No Data";
+    in property <string> description: "";
+
+    background: transparent;
+
+    VerticalLayout {
+        alignment: center;
+        spacing: SpacingSystem.spacing.s3;
+
+        // Icon
+        Text {
+            text: root.icon;
+            font-size: 48px;
+            horizontal-alignment: center;
+        }
+
+        // Title
+        Text {
+            text: root.title;
+            font-size: Typography.sizes.lg;
+            font-weight: Typography.weights.semibold;
+            color: Theme.colors.foreground;
+            horizontal-alignment: center;
+        }
+
+        // Description (optional)
+        if root.description != "": Text {
+            text: root.description;
+            font-size: Typography.sizes.sm;
+            color: Theme.colors.muted-foreground;
+            horizontal-alignment: center;
+            wrap: word-wrap;
+        }
+    }
+}