94 lines
2.2 KiB
Plaintext
94 lines
2.2 KiB
Plaintext
// Card Component
|
|
// Container for grouping related content with optional hover effect
|
|
|
|
import { Theme, Typography, SpacingSystem } from "../theme/theme.slint";
|
|
import { Animations } from "../utils/animations.slint";
|
|
|
|
// Main Card component
|
|
export component Card {
|
|
in property <bool> hoverable: false;
|
|
|
|
private property <bool> hovered: false;
|
|
|
|
// Main container
|
|
Rectangle {
|
|
background: Theme.colors.card;
|
|
border-radius: SpacingSystem.radius.lg;
|
|
border-width: 1px;
|
|
border-color: Theme.colors.border;
|
|
|
|
// Hover shadow effect
|
|
drop-shadow-blur: hovered && hoverable ? 8px : 0px;
|
|
drop-shadow-color: #00000020;
|
|
drop-shadow-offset-y: hovered && hoverable ? 4px : 0px;
|
|
|
|
animate drop-shadow-blur, drop-shadow-offset-y {
|
|
duration: Animations.durations.normal;
|
|
easing: Animations.ease-in-out;
|
|
}
|
|
|
|
VerticalLayout {
|
|
padding: SpacingSystem.spacing.s6;
|
|
spacing: SpacingSystem.spacing.s4;
|
|
|
|
@children
|
|
}
|
|
|
|
if hoverable: TouchArea {
|
|
moved => {
|
|
hovered = self.has-hover;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Card Header component
|
|
export component CardHeader {
|
|
VerticalLayout {
|
|
spacing: SpacingSystem.spacing.s2;
|
|
@children
|
|
}
|
|
}
|
|
|
|
// Card Title component
|
|
export component CardTitle {
|
|
in property <string> text;
|
|
|
|
Text {
|
|
text: root.text;
|
|
font-size: Typography.sizes.xl;
|
|
font-weight: Typography.weights.semibold;
|
|
color: Theme.colors.card-foreground;
|
|
wrap: word-wrap;
|
|
}
|
|
}
|
|
|
|
// Card Description component
|
|
export component CardDescription {
|
|
in property <string> text;
|
|
|
|
Text {
|
|
text: root.text;
|
|
font-size: Typography.sizes.sm;
|
|
color: Theme.colors.muted-foreground;
|
|
wrap: word-wrap;
|
|
}
|
|
}
|
|
|
|
// Card Content component
|
|
export component CardContent {
|
|
VerticalLayout {
|
|
spacing: SpacingSystem.spacing.s4;
|
|
@children
|
|
}
|
|
}
|
|
|
|
// Card Footer component
|
|
export component CardFooter {
|
|
HorizontalLayout {
|
|
spacing: SpacingSystem.spacing.s2;
|
|
alignment: end;
|
|
@children
|
|
}
|
|
}
|