アコーディオン

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

#[derive(Signals, Serialize, Deserialize)]
pub struct Faq {
    helpful: i32,
}

pub fn page() -> Page<Faq> {
    let helpful = Faq::helpful();
    let answers = Accordion::exclusive("faq")
        .item(
            "JavaScript は必要ですか？",
            p().text("いいえ。各セクションは <details> なので、JavaScript がなくても開きます。"),
        )
        .item(
            "見た目を変えられますか？",
            p().text("Theme でトークンを設定するか、好きな要素に Style を追加します。"),
        )
        .item(
            "アクセシブルですか？",
            p().text("ブラウザは各 summary を、セクションを開くボタンとして読み上げます。"),
        );
    Page::new(
        "よくある質問",
        Faq { helpful: 0 },
    )
    .child(
        div().css(stack(rem(1))).child(answers).child(
            p().child(
                button(ButtonVariant::Outline, ButtonSize::Sm)
                    .on_click(helpful.set(helpful + 1))
                    .text("役に立った"),
            )
            .text(" ")
            .child(span().bind_text(helpful.to_text()))
            .text(" 人が役に立ったと答えました"),
        ),
    )
}