add Button ui component

crates/yew-app/Cargo.toml

@@ -14,7 +14,7 @@ version = "0.1.0"
 [dependencies]
 log = "0.4"
 serde = "1"
-reqwest = { version = "0.11", features = ["json"] }
+reqwest = { version = "0.12", features = ["json"] }
 yew = { version = "0.21", features = ["csr"] }
 yew-router = "0.18"
 yew-hooks = "0.3"

crates/yew-app/src/app/about.rs

@@ -2,6 +2,8 @@ use serde::{de::DeserializeOwned, Deserialize, Serialize};
 use yew::prelude::*;
 use yew_hooks::prelude::*;
 
+use crate::components::ui::button::Button;
+
 /// About page
 #[function_component(About)]
 pub fn about() -> Html {
@@ -26,7 +28,7 @@ pub fn about() -> Html {
                     { ", Set up a modern yew web app by running one command." }
                 </p>
                 <p>
-                    <button class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-10 px-4 py-2 bg-emerald-600 text-slate-100 hover:bg-emerald-600/90" {onclick}>{ "Load info of this repo" }</button>
+                    <Button {onclick}>{ "Load info of this repo" }</Button>
                 </p>
                 <p>
                     {
@@ -118,7 +120,7 @@ mod tests {
     use super::About;
 
     #[wasm_bindgen_test]
-    async fn about_page_has_an_app_link() {
+    async fn _about_page_has_an_app_link() {
         yew::Renderer::<About>::with_root(
             gloo_utils::document().get_element_by_id("output").unwrap(),
         )

crates/yew-app/src/app/home.rs

@@ -1,6 +1,8 @@
 use yew::prelude::*;
 use yew_hooks::prelude::*;
 
+use crate::components::ui::button::Button;
+
 /// Home page
 #[function_component(Home)]
 pub fn home() -> Html {
@@ -27,9 +29,9 @@ pub fn home() -> Html {
                     <a id="learn_yew" class="text-emerald-800 underline" href="https://yew.rs" target="_blank" rel="noopener noreferrer">{ "Learn Yew" }</a>
                 </p>
                 <p class="space-x-4">
-                    <button class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-10 px-4 py-2 bg-emerald-600 text-slate-100 hover:bg-emerald-600/90" onclick={ondecrease}>{ "Decrease" }</button>
+                    <Button onclick={ondecrease}>{ "Decrease" }</Button>
                     <span class="w-12 inline-block">{ *counter }</span>
-                    <button class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-10 px-4 py-2 bg-emerald-600 text-slate-100 hover:bg-emerald-600/90" onclick={onincrease}>{ "Increase" }</button>
+                    <Button onclick={onincrease}>{ "Increase" }</Button>
                 </p>
                 <p>
                     { "Edit " } <code>{ "src/app/home.rs" }</code> { " and save to reload." }

crates/yew-app/src/components/mod.rs

@@ -1 +1,2 @@
 pub mod nav;
+pub mod ui;

crates/yew-app/src/components/ui/button.rs

@@ -0,0 +1,26 @@
+use yew::prelude::*;
+
+#[derive(Properties, Clone, PartialEq)]
+pub struct ButtonProps {
+    #[prop_or_default]
+    pub onclick: Callback<MouseEvent>,
+    #[prop_or_default]
+    pub disabled: bool,
+    #[prop_or_default]
+    pub button_ref: NodeRef,
+    #[prop_or_default]
+    pub children: Children,
+}
+
+#[function_component]
+pub fn Button(props: &ButtonProps) -> Html {
+    html! {
+        <button
+            class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-10 px-4 py-2 bg-emerald-600 text-slate-100 hover:bg-emerald-600/90"
+            onclick={props.onclick.clone()}
+            disabled={props.disabled}
+            ref={props.button_ref.clone()}>
+            { for props.children.iter() }
+        </button>
+    }
+}

crates/yew-app/src/components/ui/mod.rs

@@ -0,0 +1 @@
+pub mod button;

crates/yew-app/tests/web.rs

@@ -7,7 +7,7 @@ wasm_bindgen_test_configure!(run_in_browser);
 use yew_app::app::App;
 
 #[wasm_bindgen_test]
-async fn app_has_a_home_page() {
+async fn _app_has_a_home_page() {
     yew::Renderer::<App>::with_root(gloo_utils::document().get_element_by_id("output").unwrap())
         .render();