90 lines
2.6 KiB
Plaintext
90 lines
2.6 KiB
Plaintext
// Item Component
|
|
// List item with icon, title, description and selection state
|
|
|
|
import { Theme, Typography, SpacingSystem } from "../theme/theme.slint";
|
|
import { Animations } from "../utils/animations.slint";
|
|
|
|
export component Item {
|
|
// Public properties
|
|
in property <string> icon: ""; // Text icon/emoji
|
|
in property <string> title;
|
|
in property <string> description: "";
|
|
in property <bool> selected: false;
|
|
|
|
// Callbacks
|
|
callback clicked();
|
|
|
|
// Internal state
|
|
private property <bool> hovered: false;
|
|
|
|
min-height: 60px;
|
|
|
|
// Main container
|
|
Rectangle {
|
|
background: selected ? Theme.colors.accent :
|
|
hovered ? Theme.colors.muted :
|
|
Colors.transparent;
|
|
border-radius: SpacingSystem.radius.md;
|
|
|
|
animate background {
|
|
duration: Animations.durations.fast;
|
|
easing: Animations.ease-in-out;
|
|
}
|
|
|
|
HorizontalLayout {
|
|
padding: SpacingSystem.spacing.s3;
|
|
spacing: SpacingSystem.spacing.s3;
|
|
alignment: start;
|
|
|
|
// Icon (if provided)
|
|
if icon != "": Rectangle {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: SpacingSystem.radius.md;
|
|
background: Theme.colors.muted;
|
|
|
|
Text {
|
|
text: icon;
|
|
font-size: Typography.sizes.xl;
|
|
horizontal-alignment: center;
|
|
vertical-alignment: center;
|
|
}
|
|
}
|
|
|
|
// Content area
|
|
VerticalLayout {
|
|
spacing: SpacingSystem.spacing.s1;
|
|
alignment: center;
|
|
|
|
// Title
|
|
Text {
|
|
text: title;
|
|
font-size: Typography.sizes.base;
|
|
font-weight: Typography.weights.medium;
|
|
color: Theme.colors.foreground;
|
|
wrap: word-wrap;
|
|
}
|
|
|
|
// Description (if provided)
|
|
if description != "": Text {
|
|
text: description;
|
|
font-size: Typography.sizes.sm;
|
|
color: Theme.colors.muted-foreground;
|
|
wrap: word-wrap;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Touch interaction
|
|
TouchArea {
|
|
clicked => {
|
|
root.clicked();
|
|
}
|
|
|
|
moved => {
|
|
hovered = self.has-hover;
|
|
}
|
|
}
|
|
}
|
|
}
|