テキストフィールド

use hypersig::html::div;
use hypersig::style::pattern::stack;
use hypersig::style::value::rem;
use hypersig::{Page, Signals, if_else};
use hypersig_ui::{Autocomplete, InputKind, NumberField, TextField};
use serde::{Deserialize, Serialize};

#[derive(Signals, Serialize, Deserialize)]
pub struct Signup {
    email: String,
    bio: String,
    guests: i32,
}

pub fn page() -> Page<Signup> {
    let email = Signup::email();
    let looks_wrong = !email.is_empty().or(email.contains("@"));
    let initial = Signup {
        email: String::new(),
        bio: String::new(),
        guests: 1,
    };
    Page::new(
        "登録",
        initial,
    )
    .child(
        div()
            .css(stack(rem(1.25)).max_width(rem(24)))
            .child(
                TextField::new(
                    "メールアドレス",
                    email,
                )
                .kind(InputKind::Email)
                .autocomplete(Autocomplete::Email)
                .placeholder("ada@example.com")
                .description("領収書をこのアドレスに送ります。")
                .error(if_else(
                    looks_wrong,
                    "メールアドレスを入力してください。",
                    "",
                ))
                .required(),
            )
            .child(
                TextField::new(
                    "自己紹介",
                    Signup::bio(),
                )
                .multiline()
                .description("プロフィールに載せる 1、2 文です。"),
            )
            .child(
                NumberField::new(
                    "人数",
                    Signup::guests(),
                )
                .min(1)
                .max(10)
                .description("10 人まで入れられます。"),
            ),

    )
}