Input OTP

1use herogpui::prelude::{InputOTP, Label, Link, OtpState};
2use gpui::prelude::*;
3use gpui::px;
4
5gpui::div()
6    .flex()
7    .flex_col()
8    .items_start()
9    .gap(px(12.))
10    .children(vec![
11        Label::new("Verify account").into_any_element(),
12        muted_para("We've sent a code to a****@gmail.com", cx),
13        InputOTP::new(self.otp.clone())
14            .separator()
15            .on_complete(cx.listener(|this, code: &str, _, cx| {
16                this.otp_done = code.to_owned();
17                cx.notify();
18            }))
19            .into_any_element(),
20        gpui::div()
21            .flex()
22            .items_center()
23            .gap(px(5.))
24            .child(muted_para(
25                &if done.is_empty() {
26                    "Didn't receive a code?".to_owned()
27                } else {
28                    format!("Complete: {done}")
29                },
30                cx,
31            ))
32            .child(Link::new("input-otp-resend").label("Resend").href("#"))
33            .into_any_element(),
34    ])