48 lines
1.6 KiB
Plaintext
48 lines
1.6 KiB
Plaintext
// 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;
|
|
}
|
|
}
|
|
}
|