Simple GTK counter example

Cargo.toml

@@ -16,6 +16,7 @@ members = [
   "examples/counters",
   "examples/counters-stable",
   "examples/fetch",
+  "examples/gtk",
   "examples/hackernews/hackernews-app",
   "examples/hackernews/hackernews-client",
   "examples/hackernews/hackernews-server",

examples/gtk/Cargo.toml

@@ -0,0 +1,8 @@
+[package]
+name = "gtk"
+version = "0.1.0"
+edition = "2021"
+
+[dependencies]
+leptos = { path = "../../leptos" }
+gtk = { version = "0.5.0", package = "gtk4" }

examples/gtk/src/main.rs

@@ -0,0 +1,61 @@
+use gtk::prelude::*;
+use gtk::{Application, ApplicationWindow, Button};
+use leptos::*;
+
+const APP_ID: &str = "dev.leptos.Counter";
+
+// Basic GTK app setup from https://gtk-rs.org/gtk4-rs/stable/latest/book/hello_world.html
+fn main() {
+    _ = create_scope(|cx| {
+        // Create a new application
+        let app = Application::builder().application_id(APP_ID).build();
+
+        // Connect to "activate" signal of `app`
+        app.connect_activate(move |app| build_ui(cx, app));
+
+        // Run the application
+        app.run();
+    });
+}
+
+fn build_ui(cx: Scope, app: &Application) {
+    let button = counter_button(cx);
+
+    // Create a window and set the title
+    let window = ApplicationWindow::builder()
+        .application(app)
+        .title("Leptos-GTK")
+        .child(&button)
+        .build();
+
+    // Present window
+    window.present();
+}
+
+fn counter_button(cx: Scope) -> Button {
+    let (value, set_value) = create_signal(cx, 0);
+
+    // Create a button with label and margins
+    let button = Button::builder()
+        .label("Count: ")
+        .margin_top(12)
+        .margin_bottom(12)
+        .margin_start(12)
+        .margin_end(12)
+        .build();
+
+    // Connect to "clicked" signal of `button`
+    button.connect_clicked(move |_| {
+        // Set the label to "Hello World!" after the button has been clicked on
+        set_value.update(|value| *value += 1);
+    });
+
+    create_effect(cx, {
+        let button = button.clone();
+        move |_| {
+            button.set_label(&format!("Count: {}", value()));
+        }
+    });
+
+    button
+}