gpui demo

Counter.rs

// Reusable GPUI button and stateful parent.
// Window/application startup is omitted.

use gpui::{
    div, prelude::*, rgb, App, ClickEvent, Context, ElementId,
    IntoElement, RenderOnce, Role, SharedString, Window,
};

// These fields are the button's props.
#[derive(IntoElement)]
struct Button {
    id: ElementId,
    label: SharedString,
    on_click: Box<dyn Fn(&ClickEvent, &mut Window, &mut App)>,
}

impl RenderOnce for Button {
    fn render(self, _window: &mut Window, _cx: &mut App) -> impl IntoElement {
        div()
            .id(self.id)
            .role(Role::Button)
            .aria_label(self.label.clone())
            .focusable()
            .cursor_pointer()
            .px_4()
            .py_2()
            .rounded_md()
            .bg(rgb(0x1d4ed8))
            .text_color(rgb(0xffffff))
            .border_2()
            .border_color(rgb(0x1d4ed8))
            .hover(|style| style.bg(rgb(0x1e40af)))
            .active(|style| style.bg(rgb(0x1e3a8a)))
            .focus_visible(|style| style.border_color(rgb(0xfacc15)))
            .on_click(self.on_click)
            .child(self.label)
    }
}

// The parent owns the persistent state.
struct Counter {
    count: usize,
}

impl Render for Counter {
    fn render(
        &mut self,
        _window: &mut Window,
        cx: &mut Context<Self>,
    ) -> impl IntoElement {
        Button {
            id: "increment".into(),
            label: format!("Count: {}", self.count).into(),
            on_click: Box::new(cx.listener(|counter, _event, _window, cx| {
                counter.count += 1;
                cx.notify();
            })),
        }
    }
}