Functional dashboard button

public/square-user.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 20C7 17.2386 9.23858 15 12 15C14.7614 15 17 17.2386 17 20M7.2 20H16.8C17.9201 20 18.4802 20 18.908 19.782C19.2843 19.5903 19.5903 19.2843 19.782 18.908C20 18.4802 20 17.9201 20 16.8V7.2C20 6.0799 20 5.51984 19.782 5.09202C19.5903 4.71569 19.2843 4.40973 18.908 4.21799C18.4802 4 17.9201 4 16.8 4H7.2C6.0799 4 5.51984 4 5.09202 4.21799C4.71569 4.40973 4.40973 4.71569 4.21799 5.09202C4 5.51984 4 6.07989 4 7.2V16.8C4 17.9201 4 18.4802 4.21799 18.908C4.40973 19.2843 4.71569 19.5903 5.09202 19.782C5.51984 20 6.07989 20 7.2 20ZM14 10C14 11.1046 13.1046 12 12 12C10.8954 12 10 11.1046 10 10C10 8.89543 10.8954 8 12 8C13.1046 8 14 8.89543 14 10Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

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>
+    }
+}