Update examples, add css

examples/global.rs

@@ -1,6 +1,9 @@
-//! Example: README.md showcase
+//! Example: Global signals and memos
 //!
-//! The example from the README.md.
+//! This example demonstrates how to use global signals and memos to share state across your app.
+//! Global signals are simply signals that live on the root of your app and are accessible from anywhere. To access a
+//! global signal, simply use its methods like a regular signal. Calls to `read` and `write` will be forwarded to the
+//! signal at the root of your app using the `static`'s address.
 
 use dioxus::prelude::*;
 
@@ -13,8 +16,43 @@ static DOUBLED_COUNT: GlobalMemo<i32> = Signal::global_memo(|| COUNT() * 2);
 
 fn app() -> Element {
     rsx! {
-        h1 { "{COUNT} x 2 = {DOUBLED_COUNT}" }
+        style { {include_str!("./assets/counter.css")} }
+        Increment {}
+        Decrement {}
+        Reset {}
+        Display {}
+    }
+}
+
+#[component]
+fn Increment() -> Element {
+    rsx! {
         button { onclick: move |_| *COUNT.write() += 1, "Up high!" }
+    }
+}
+
+#[component]
+fn Decrement() -> Element {
+    rsx! {
         button { onclick: move |_| *COUNT.write() -= 1, "Down low!" }
     }
 }
+
+#[component]
+fn Display() -> Element {
+    rsx! {
+        p { "Count: ", "{COUNT}" }
+        p { "Doubled: ", "{DOUBLED_COUNT}" }
+    }
+}
+
+#[component]
+fn Reset() -> Element {
+    // Not all write methods are availale on global signals since `write` requires a mutable reference. In these cases,
+    // We can simply pull out the actual signal using the signal() method.
+    let mut as_signal = use_hook(|| COUNT.signal());
+
+    rsx! {
+        button { onclick: move |_| as_signal.set(0), "Reset" }
+    }
+}