Functional dashboard button

src/app.rs

@@ -7,7 +7,7 @@ use leptos_router::{
 };
 use url::Url;
 
-use crate::pages::{AboutPage, HomePage, UnauthenticatedPage};
+use crate::pages::{AboutPage, HomePage, TestPage, UnauthenticatedPage};
 
 pub fn shell(options: LeptosOptions) -> impl IntoView {
     view! {
@@ -67,6 +67,7 @@ pub fn App() -> impl IntoView {
                 <Routes fallback=|| "Page not found.".into_view()>
                     <Route path=StaticSegment("") view=HomePage/>
                     <Route path=StaticSegment("about") view=AboutPage/>
+                    <Route path=StaticSegment("test_page") view=TestPage/>
                 </Routes>
             </main>
         </Router>

src/components/dashboard_button.rs

@@ -1,5 +1,33 @@
 use leptos::prelude::*;
+use leptos_router::hooks::use_navigate;
 #[component]
-pub fn DashboardButton() -> impl IntoView {
-    view! {}
+pub fn DashboardButton(
+    #[prop(into)] title: String,
+    #[prop(into, optional)] description: Option<String>,
+    #[prop(into, optional)] icon: Option<String>,
+    #[prop(into)] path: String,
+) -> impl IntoView {
+    let navigate = use_navigate();
+
+    let on_click = move |_| navigate(&path, Default::default());
+
+    view! {
+        <button
+            type="button"
+            class="dashboard-button flex items-start gap-3 rounded-lg border p-4
+                   hover:bg-gray-100 transition cursor-pointer w-full text-left"
+            on:click=on_click
+        >
+            {icon.as_ref().map(|src| view! {
+                <img src={src.clone()} class="h-8 w-8" alt="icon"/>
+            })}
+
+            <div class="flex flex-col">
+                <h3 class="font-semibold text-base">{title.clone()}</h3>
+                {description.as_ref().map(|d| view! {
+                    <p class="text-sm text-gray-600">{d.clone()}</p>
+                })}
+            </div>
+        </button>
+    }
 }

src/components/mod.rs

@@ -1,7 +1,7 @@
 mod action_button;
 mod checkbox;
 mod chips;
-mod dashboard_button;
+pub(crate) mod dashboard_button;
 mod loading;
 mod multi_entry;
 mod panel;

src/pages/mod.rs

@@ -1,5 +1,6 @@
 mod about_page;
 mod home_page;
+mod test_page;
 mod unauthenticated_page;
 
-pub use self::{about_page::*, home_page::*, unauthenticated_page::*};
+pub use self::{about_page::*, home_page::*, test_page::*, unauthenticated_page::*};

src/pages/test_page.rs

@@ -0,0 +1,15 @@
+use crate::components::dashboard_button::DashboardButton;
+use leptos::prelude::*;
+#[component]
+pub fn TestPage() -> impl IntoView {
+    view! {
+        <div class="p-6 space-y-4">
+            <DashboardButton
+                title="Home Page"
+                description="Navigate to Home Page"
+                icon="/public/square-user.svg"
+                path="/"
+            />
+        </div>
+    }
+}