メニュー

use hypersig::html::{div, p};
use hypersig::style::pattern::stack;
use hypersig::style::value::rem;
use hypersig::{Page, Signals};
use hypersig_ui::{ButtonSize, ButtonVariant, Menu, MenuItem};
use serde::{Deserialize, Serialize};

#[derive(Signals, Serialize, Deserialize)]
pub struct Project {
    archived: bool,
    status: String,
}

const ACTIONS: Menu<Project> = Menu::new("actions");

pub fn page() -> Page<Project> {
    let archived = Project::archived();
    let status = Project::status();
    let initial = Project {
        archived: false,
        status: String::new(),
    };
    Page::new(
        "プロジェクト",
        initial,
    )
    .child(
        div()
            .css(stack(rem(1)))
            .child(
                div()
                    .child(
                        ACTIONS
                            .trigger(ButtonVariant::Outline, ButtonSize::Default)
                            .text("プロジェクトの操作"),
                    )
                    .child(
                        ACTIONS.menu([
                            MenuItem::new(
                                "名前を変更",
                                status.set("プロジェクトの名前を変更しました。"),
                            ),
                            MenuItem::new(
                                "複製",
                                status.set("プロジェクトを複製しました。"),
                            ),
                            MenuItem::new(
                                "アーカイブ",
                                archived.set(true).then(status.set("プロジェクトをアーカイブしました。")),
                            )
                            .disabled(archived),
                            MenuItem::new(
                                "削除",
                                status.set("プロジェクトを削除しました。"),
                            )
                            .destructive(),
                        ]),
                    ),
            )
            .child(p().attr("role", "status").bind_text(status)),
    )
}