feat: button component (#219)

TownHallHQ · Sep 14, 2024 · 34ebb3e · 34ebb3e
1 parent 35cfb07
commit 34ebb3e
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 12 deletions.
diff --git a/crates/web/src/components/auth/login.rs b/crates/web/src/components/auth/login.rs
@@ -5,6 +5,7 @@ use leptos::{
 
 use townhall_client::Client;
 
+use crate::components::button::{Button, ButtonType, ButtonVariant};
 use crate::components::text_field::{TextField, TextFieldType};
 
 #[component]
@@ -56,12 +57,10 @@ pub fn LoginCard(
                   placeholder="* * * * * * *"
                   value=password_value
               />
-              <button
-                  type="submit"
-                  class="bg-blue-700 text-white font-bold w-full mt-3 rounded-md py-3 px-4"
-              >
+
+              <Button r#type=ButtonType::Submit full_width=true>
                   Log in
-              </button>
+              </Button>
               <Show when=move || error_getter.get().is_some()>
                   <div class="bg-rose-600 text-white p-2 rounded-md">
                       {error_getter.get().unwrap()}

diff --git a/crates/web/src/components/auth/register.rs b/crates/web/src/components/auth/register.rs
@@ -8,6 +8,7 @@ use leptos::{
 use townhall_client::Client;
 use townhall_types::user::Email;
 
+use crate::components::button::{Button, ButtonType, ButtonVariant};
 use crate::components::text_field::{TextField, TextFieldType};
 
 #[component]
@@ -83,13 +84,13 @@ pub fn SignupCard(
                   placeholder="Password"
                   value=password_value
               />
-              <button
-                  type="button"
-                  on:click=move |_| submit.dispatch(())
-                  class="bg-blue-700 text-white font-bold w-full mt-3 rounded-md py-3 px-4"
+              <Button
+              r#type=ButtonType::Button
+              on:click=move |_| submit.dispatch(())
+        full_width=true
               >
                   Sign up
-              </button>
+              </Button>
               <Show when=move || error_getter.get().is_some()>
                   <div class="bg-rose-600 text-white p-2 rounded-md">
                       {error_getter.get().unwrap()}

diff --git a/crates/web/src/components/button.rs b/crates/web/src/components/button.rs
@@ -1,5 +1,8 @@
+use core::fmt;
 use std::collections::HashSet;
+use std::rc::Rc;
 
+use leptos::web_sys::MouseEvent;
 use leptos::{component, create_memo, view, Children, IntoView, MaybeProp, SignalGet, TextProp};
 
 use super::helper::maybe_children::MaybeChildren;
@@ -12,13 +15,32 @@ pub enum ButtonVariant {
     Outlined,
 }
 
+#[derive(Clone, Debug, Default, PartialEq, Eq)]
+pub enum ButtonType {
+    #[default]
+    Button,
+    Submit,
+}
+
+impl fmt::Display for ButtonType {
+    fn fmt(&self, f: &mut fmt::Formatter) -> fmt::Result {
+        match self {
+            ButtonType::Submit => write!(f, "submit"),
+            ButtonType::Button => write!(f, "button"),
+        }
+    }
+}
+
 #[component]
 pub fn Button(
     #[prop(optional, into)] id: TextProp,
     #[prop(optional, into)] class: TextProp,
     #[prop(optional, into)] disabled: MaybeProp<bool>,
+    #[prop(optional, into)] full_width: MaybeProp<bool>,
     #[prop(optional, into)] variant: MaybeProp<ButtonVariant>,
     #[prop(optional)] children: Option<Children>,
+    #[prop(optional, into)] on_click: MaybeProp<Rc<dyn Fn(MouseEvent) -> () + 'static>>,
+    #[prop(optional, into)] r#type: ButtonType,
 ) -> impl IntoView {
     let custom_classes = class.get();
     let class_names = create_memo(move |_| {
@@ -34,6 +56,12 @@ pub fn Button(
         classes.insert("font-semibold");
         classes.insert("text-sm");
 
+        if let Some(is_full_width) = full_width.get() {
+            if is_full_width {
+                classes.insert("w-full");
+            }
+        }
+
         if let Some(is_disabled) = disabled.get() {
             if is_disabled {
                 classes.insert("opacity-70");
@@ -48,7 +76,7 @@ pub fn Button(
             }
             ButtonVariant::Contained => {
                 classes.insert("btn-contained");
-                classes.insert("bg-purple-500");
+                classes.insert("bg-blue-700");
                 classes.insert("text-white");
             }
             ButtonVariant::Outlined => {
@@ -62,8 +90,20 @@ pub fn Button(
         classes.into_iter().collect::<Vec<&str>>().join(" ")
     });
 
+    let handle_click = move |event| {
+        if let Some(on_click) = on_click.get() {
+            on_click.clone()(event);
+        }
+    };
+
     view! {
-        <button id=id class=class_names disabled=move || disabled.get()>
+        <button
+            type=format!("{}", r#type)
+            id=id
+            class=class_names
+            disabled=move || disabled.get()
+            on:click=handle_click
+        >
             <MaybeChildren value=children let:children>
                 {children()}
             </MaybeChildren>