more tutorial abstractions

2025-11-28 12:43:32 -08:00
parent c8bc34db77
commit 50dd87f290
2 changed files with 39 additions and 2 deletions
--- a/index.html
+++ b/index.html
@@ -1,6 +1,12 @@
 <!DOCTYPE html>
 <html>
-  <head></head>
+  <head>
+<style>
+.red {
+  color: red;
+}
+</style>
+  </head>
  <body></body>
 </html>

--- a/src/main.rs
+++ b/src/main.rs
@@ -1,6 +1,37 @@
 use leptos::prelude::*;

+#[component]
+fn ProgressBar(
+    #[prop(default = 100)]
+    max: u16,
+    progress: ReadSignal<u16>) -> impl IntoView {
+    view! {
+        <progress max=max value=progress />
+    }
+}
+
+#[component]
+fn App() -> impl IntoView {
+    let (count, set_count) = signal(0);
+
+    let double_count = move || count.get() * 2;
+    view! {
+        <button
+            on:click=move |_| { *set_count.write() += 1; }
+        class:red=move || count.get() % 2 == 1
+        >
+            "Click: "
+            {count}
+        </button>
+        <p>
+        {double_count}
+        </p>
+        <ProgressBar max=55 progress=count />
+    }
+}
+
+
 fn main() {
    console_error_panic_hook::set_once();
-    leptos::mount::mount_to_body(|| view! { <p>"Hello, world!"</p> })
+    leptos::mount::mount_to_body(App)
 }