init

ui/components/badge.slint

@@ -0,0 +1,47 @@
+// Badge Component
+// Small status indicator or label
+
+import { Theme, Typography, SpacingSystem } from "../theme/theme.slint";
+
+export component Badge {
+    // Public properties
+    in property <string> text: "Badge";
+    in property <string> variant: "default"; // default | secondary | destructive | outline
+    
+    // Calculate colors based on variant
+    private property <color> bg-color: {
+        if variant == "destructive" { Theme.colors.destructive }
+        else if variant == "secondary" { Theme.colors.secondary }
+        else if variant == "outline" { Colors.transparent }
+        else { Theme.colors.primary }
+    };
+    
+    private property <color> text-color: {
+        if variant == "destructive" { Theme.colors.destructive-foreground }
+        else if variant == "secondary" { Theme.colors.secondary-foreground }
+        else if variant == "outline" { Theme.colors.foreground }
+        else { Theme.colors.primary-foreground }
+    };
+    
+    // Fixed height for badge
+    height: 24px;
+    
+    Rectangle {
+        background: bg-color;
+        border-radius: 12px; // Fixed radius for consistent rounded look
+        border-width: variant == "outline" ? 1px : 0px;
+        border-color: Theme.colors.border;
+        
+        // Center the text
+        Text {
+            text: root.text;
+            font-size: Typography.sizes.xs;
+            font-weight: Typography.weights.medium;
+            color: text-color;
+            vertical-alignment: center;
+            horizontal-alignment: center;
+            x: 10px;
+            width: parent.width - 20px;
+        }
+    }
+}