feat: implement back button for banner

This button is intended to bring the user all the way back to the specified dashboard. Another could be created to exit the form, but I don't think that's needed for now.

src/components/banner.rs

@@ -1,5 +1,6 @@
 use leptos::prelude::*;
 use leptos_router::hooks::use_navigate;
+use leptos_icons::Icon;
 
 /// # Banner Component
 ///
@@ -23,17 +24,24 @@ pub fn Banner(
     #[prop(into)]
     logo: String,
     /// The route that the navigates user to a page (home page).
-    #[prop(into, default = String::from("/"))]
-    path: String,
+    #[prop(into, optional)]
+    path: Signal<String>,
 ) -> impl IntoView {
     let navigate = use_navigate();
 
-    let on_click = move |_| navigate(&path, Default::default());
+    let show_back = Signal::derive(move || !path.get().is_empty());
+    
+    let on_click = move |_| {
+        let path = path.get();
+        if !path.is_empty() {
+            navigate(&path, Default::default());
+        }
+    };
 
     view! {
         <div class="mx-auto">
             <div class="bg-red-900 shadow-lg shadow-[inset_0_2px_4px_0_rgba(0,0,0,0.3),0_4px_6px_-1px_rgba(127,29,29,0.3),0_2px_4px_-1px_rgba(127,29,29,0.2)]">
-                <div class="flex items-center gap-4 p-6">
+                <div class="flex flex-row items-center gap-4 p-6 pb-2">
                     <div class="flex-shrink-0">
                         <img
                             src=logo.clone()
@@ -46,6 +54,20 @@ pub fn Banner(
                         <h2 class="text-white text-2xl font-bold">{title.clone()}</h2>
                     </div>
                 </div>
+                <div
+                    class="flex flex-row items-center gap-4"
+                    class=("p-2", move || !show_back.get())
+                >
+                    <Show when=move || show_back.get()>
+                        <a
+                            href=path
+                            class="flex flex-row items-center gap-2 m-2 ml-14 text-gray-200 hover:underline"
+                        >
+                            <Icon icon=icondata::FaArrowLeftSolid />
+                            <span>"Back to Dashboard"</span>
+                        </a>
+                    </Show>
+                </div>
             </div>
         </div>
     }

src/pages/provider_contact.rs

@@ -148,7 +148,7 @@ pub fn ProviderContactPage() -> impl IntoView {
 
 // Display contact form.
     view! {
-        <Banner title="R15 Scholarships" logo="/PHS_Stacked_Acronym.png" path="/" />
+        <Banner title="R15 Scholarships" logo="/PHS_Stacked_Acronym.png" path="/providers" />
         <AuthLoaded fallback=Loading>
             <Authenticated unauthenticated=UnauthenticatedPage>
                 <Suspense fallback=Loading>

src/pages/provider_portal.rs

@@ -20,7 +20,7 @@ pub fn ProviderPortal() -> impl IntoView {
     });
     
     view! {
-        <Banner title="Provider Dashboard" logo="PHS_Stacked_Acronym.png" path="/" />
+        <Banner title="Provider Dashboard" logo="PHS_Stacked_Acronym.png" />
         <AuthLoaded fallback=Loading>
             <Authenticated unauthenticated=UnauthenticatedPage>
                 <div class="mx-auto px-6">

src/pages/scholarship_info.rs

@@ -40,7 +40,7 @@ pub fn ScholarshipInfoPage() -> impl IntoView {
     // Remember that we only want to show the page after we've got authentication information
     // and if there's data for us to use.
     view! {
-        <Banner title="R15 Scholarships" logo="/PHS_Stacked_Acronym.png" path="/" />
+        <Banner title="R15 Scholarships" logo="/PHS_Stacked_Acronym.png" path="/providers" />
         <ToastList>
             <AuthLoaded fallback=Loading>
                 <Authenticated unauthenticated=UnauthenticatedPage>