created button components

leptos_components/src/components/buttons.rs

@@ -0,0 +1,46 @@
+use leptos::prelude::*;
+use leptos::logging;
+
+pub enum ButtonStyle {
+    Primary,
+    Secondary,
+    Success,
+    Danger,
+    Warning
+}
+
+#[component]
+pub fn Button(
+    #[prop(optional)]
+    style: Option<ButtonStyle>,
+    children: Children,
+) -> impl IntoView {
+    let style_type;
+    if style.is_none() {
+        style_type = ButtonStyle::Primary;
+    } else {
+        style_type = style.unwrap();
+    }
+    let mut stylestring = "";
+    match style_type {
+        ButtonStyle::Primary => {
+            stylestring = "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded";
+        },
+        ButtonStyle::Secondary => {
+            stylestring = "bg-gray-300 hover:bg-gray-500 text-black font-semibold py-2 px-4 rounded";
+        },
+        ButtonStyle::Success => {
+            stylestring = "bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded";
+        }, 
+        ButtonStyle::Danger => {
+            stylestring = "bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded";
+        },
+        ButtonStyle::Warning => {
+            stylestring = "bg-yellow-500 hover:bg-yellow-700 text-black font-semibold py-2 px-4 rounded";
+        }
+    }
+    logging::log!("{}", stylestring);
+    view! {
+        <button class={stylestring}>{children()}</button>
+    }
+}

leptos_components/src/components/mod.rs

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

leptos_components/src/lib.rs

@@ -1,11 +1,2 @@
-use leptos::prelude::*;
+pub mod components;
 
-
-#[component]
-pub fn Button(
-    children: Children,
-) -> impl IntoView {
-    view! {
-        <button>{children()}</button>
-    }
-}

website/Cargo.toml

@@ -56,7 +56,11 @@ site-root = "target/site"
 site-pkg-dir = "pkg"
 
 # [Optional] The source CSS file. If it ends with .sass or .scss then it will be compiled by dart-sass into CSS. The CSS is optimized by Lightning CSS before being written to <site-root>/<site-pkg>/app.css
-style-file = "style/main.scss"
+#style-file = "style/tailwind.css"
+
+# Optional, Activates the tailwind build
+tailwind-input-file = "style/tailwind.css"
+
 # Assets source dir. All files found here will be copied and synchronized to site-root.
 # The assets-dir cannot have a sub directory with the same name/path as site-pkg-dir.
 #
@@ -64,10 +68,10 @@ style-file = "style/main.scss"
 assets-dir = "public"
 
 # The IP and port (ex: 127.0.0.1:3000) where the server serves the content. Use it in your server setup.
-site-addr = "127.0.0.1:3000"
+site-addr = "127.0.0.1:5000"
 
 # The port to use for automatic reload monitoring
-reload-port = 3001
+reload-port = 5001
 
 # [Optional] Command to use when running end2end tests. It will run in the end2end dir.
 #   [Windows] for non-WSL use "npx.cmd playwright test"

website/src/app.rs

@@ -4,7 +4,7 @@ use leptos_router::{
     components::{Route, Router, Routes},
     StaticSegment,
 };
-use leptos_components::Button;
+use leptos_components::components::buttons::Button;
 
 pub fn shell(options: LeptosOptions) -> impl IntoView {
     view! {
@@ -57,7 +57,7 @@ fn HomePage() -> impl IntoView {
 
     view! {
         <h1>"Welcome to Leptos!"</h1>
-        <button on:click=on_click>"Click Me: " {count}</button>
-        <Button on:click=on_click>"Click Me: " {count}</Button>
+        <button on:click=on_click>"Click Me: " {move || count.get()}</button>
+        <Button on:click=on_click>"Click Me: " {move || count.get()}</Button>
     }
 }

website/tailwind.config.js

@@ -1,7 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: {
-    files: ["*.html", "./src/**/*.rs"],
+    files: ["*.html", "./src/**/*.rs", "../leptos_components/src/**/*.rs"],
     transform: {
       rs: (content) => content.replace(/(?:^|\s)class:/g, ' '),
     },