Merge pull request #26

Banner component

src/components/banner.rs

@@ -0,0 +1,48 @@
+use leptos::prelude::*;
+use leptos_router::hooks::use_navigate;
+
+/// # Banner Component
+///
+/// This component displays a red banner at the top of the page with a title and a logo.
+/// Clicking the logo will redirect a user to specified page, preferably a home page.
+///
+/// Example usage:
+/// ```
+///  <Banner
+///     title="Test Page"
+///     logo="medal.png"
+///     path="/"
+///  />
+/// ```
+#[component]
+pub fn Banner(
+    /// The title of the banner.
+    #[prop(into)]
+    title: String,
+    /// The file path or URL of a logo displayed at the top left of the banner.
+    #[prop(into)]
+    logo: String,
+    /// The route that the navigates user to a page (home page).
+    #[prop(into, default = String::from("/"))]
+    path: String,
+) -> impl IntoView {
+    let navigate = use_navigate();
+
+    let on_click = move |_| 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-shrink-0">
+                <img src={logo.clone()} class="h-10 w-10 cursor-pointer" alt="icon" on:click=on_click/>
+              </div>
+              <div class="flex-1">
+                <h2 class="text-white text-lg font-bold">{title.clone()}</h2>
+              </div>
+            </div>
+          </div>
+        </div>
+
+    }
+}

src/components/dashboard_button.rs

@@ -40,7 +40,7 @@ pub fn DashboardButton(
     view! {
         <button
             type="button"
-            class="dashboard-button flex items-start gap-3 rounded-lg border-grey-300 p-6
+            class="dashboard-button flex items-start gap-3 rounded-lg bg-white border-grey-300 p-6
                    hover:bg-gray-100 transition cursor-pointer w-full text-left
                    shadow-[inset_0_0_6px_rgba(0,0,0,0.12)]"
             on:click=on_click>

src/components/mod.rs

@@ -1,4 +1,5 @@
 mod action_button;
+mod banner;
 mod checkbox;
 mod chips;
 mod dashboard_button;
@@ -12,6 +13,6 @@ mod text_field;
 mod utils;
 
 pub use self::{
-    action_button::*, checkbox::*, chips::*, dashboard_button::*, loading::*, multi_entry::*,
+    action_button::*, banner::*, checkbox::*, chips::*, dashboard_button::*, loading::*,
-    panel::*, radio::*, row::*, select::*, text_field::*,
+    multi_entry::*, panel::*, radio::*, row::*, select::*, text_field::*,
 };

src/pages/mod.rs

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

src/pages/provider_portal.rs

@@ -0,0 +1 @@
+