slint/demos/home-automation/ui/components/timeInfo.slint

// Copyright © SixtyFPS GmbH <info@slint.dev>
// SPDX-License-Identifier: MIT
import { Palette,Measurements,Colors, Style } from "../common.slint";
import { Info } from "info.slint";
import { HaText } from "./general/haText.slint";

export component TimeInfo inherits Info {
    in property <int> index;
    in property <int> hours: 3;
    in property <int> minutes: 15;
    HorizontalLayout {
        alignment: center;
        spacing: 40px;
        HorizontalLayout {
            alignment: center;
            HaText {
                text: hours;
                horizontal-alignment: center;
                vertical-alignment: center;
                color: Palette.info-foreground;
                font-size: Style.H1-font-size;
            }

            HaText {
                text: ":";
                horizontal-alignment: center;
                vertical-alignment: center;
                color: Palette.info-foreground;
                font-size: Style.H1-font-size;
            }

            HaText {
                text: minutes;
                horizontal-alignment: center;
                vertical-alignment: center;
                color: Palette.info-foreground;
                font-size: Style.H1-font-size;
            }

            HaText {
                text: " PM";
                horizontal-alignment: center;
                vertical-alignment: center;
                color: Palette.info-foreground;
                font-size: Style.H2-font-size;
            }
        }

        date := Rectangle {
            y: root.height * 0.15;
            clip: true;
            height: root.height * 0.7;
            border-radius: 15px;
            width: self.height;
            background: Palette.date-background;
            Rectangle {
                height: 30%;
                y: 0;
                background: Palette.accent-background;
                HaText {
                    text: "Oct";
                    font-size: Style.icon-title-font-size;
                }
            }

            HaText {
                text: "18";
                y: parent.height * 0.3;
                color: Palette.foreground;
                font-size: Style.H2-font-size;
                font-weight: 600;
            }
        }
    }
}