アラート

use hypersig::html::{div, when};
use hypersig::style::pattern::stack;
use hypersig::style::value::rem;
use hypersig::{Page, Signals};
use hypersig_ui::{
    AlertVariant, ButtonSize, ButtonVariant, alert, alert_description, alert_title, button,
};
use serde::{Deserialize, Serialize};

#[derive(Signals, Serialize, Deserialize)]
pub struct Builds {
    failed: bool,
}

pub fn page() -> Page<Builds> {
    let failed = Builds::failed();
    Page::new(
        "ビルド",
        Builds { failed: false },
    )
    .child(
        div()
            .css(stack(rem(1)))
            .child(
                alert(AlertVariant::Default)
                    .child(alert_title().text("デプロイを停止しています"))
                    .child(alert_description().text("UTC の 18:00 に再開します。")),
            )
            .child(when(
                failed,
                alert(AlertVariant::Destructive)
                    .child(alert_title().text("ビルドに失敗しました"))
                    .child(alert_description().text("最新のコミットがコンパイルできません。")),
            ))
            .child(
                div().child(
                    button(ButtonVariant::Outline, ButtonSize::Sm)
                        .on_click(failed.toggle())
                        .text("エラーを切り替える"),
                ),
            ),
    )
}