component {
props {
prop(name = label)
prop(name = value)
prop(name = accent, default = "")
}
resources {
style """
.stat-card {
background: var(--surface);
border_radius: 6;
border_width: 1;
border_color: var(--border);
padding: 16 22;
spacing: 6;
}
.stat-card__num { size: 26; bold: true; color: var(--accent); }
.stat-card__num--ok { color: var(--ok); }
"""
}
column(class = stat-card) {
text(
"@label",
class = u-label-cap
)
text(
"@value",
class = "stat-card__num stat-card__num--ok",
if = @accent, equals = 1
)
text(
"@value",
class = stat-card__num, else
)
}
}