1786048673

ui/components/component_card.slint

@@ -0,0 +1,42 @@
+// Copyright © SixtyFPS GmbH <info@slint.dev>
+// SPDX-License-Identifier: MIT
+
+import {
+    MaterialText,
+    OutlinedCard,
+    MaterialTypography,
+    MaterialStyleMetrics
+} from "../material.slint";
+
+export component ComponentCard {
+    in property <string> title;
+
+    HorizontalLayout {
+       alignment: center;
+
+        VerticalLayout {
+            spacing: 4px;
+            alignment: start;
+
+            MaterialText {
+                horizontal_alignment: center;
+                text: root.title;
+                style: MaterialTypography.title_medium;
+            }
+
+            OutlinedCard {
+                min-width: 360px;
+
+                VerticalLayout {
+                    padding_left: 2px;
+                    padding_right: self.padding_left;
+                    padding_top: MaterialStyleMetrics.padding_8;
+                    padding_bottom: self.padding_top;
+                    spacing: MaterialStyleMetrics.spacing_8;
+
+                    @children
+                }
+            }
+        }
+    }
+}

ui/components/group.slint

@@ -0,0 +1,31 @@
+// Copyright © SixtyFPS GmbH <info@slint.dev>
+// SPDX-License-Identifier: MIT
+
+import {
+    MaterialText,
+    MaterialPalette,
+    MaterialTypography
+} from "../material.slint";
+
+export component Group {
+    in property <string> title;
+
+    Rectangle {
+        border_radius: 12px;
+        background: MaterialPalette.surface_bright;
+
+        VerticalLayout {
+            alignment: start;
+            padding: 8px;
+            spacing: 16px;
+
+            MaterialText {
+                horizontal_alignment: center;
+                text: root.title;
+                style: MaterialTypography.headline_small;
+            }
+
+            @children
+        }
+    }
+}

ui/components/text_icon_button.slint

@@ -0,0 +1,24 @@
+// Copyright © SixtyFPS GmbH <info@slint.dev>
+// SPDX-License-Identifier: MIT
+
+import {
+    IconButton,
+    MaterialText
+} from "../material.slint";
+
+export component TextIconButton {
+    in property <image> icon <=> button.icon;
+    in property <string> text <=> label.text;
+
+    VerticalLayout {
+        HorizontalLayout {
+            alignment: center;
+
+            button := IconButton {}
+        }
+
+        label := MaterialText {
+            horizontal_alignment: center;
+        }
+    }
+}