feat(app): add a footer

Author: johnbchron

crates/site-app/src/components.rs

@@ -1,6 +1,7 @@
 mod copy_button;
 mod create_button;
 mod data_table;
+mod footer;
 pub mod form_layout;
 mod icons;
 mod input_field;
@@ -11,7 +12,7 @@ mod refetch_while_focused;
 mod store_path;
 
 pub use self::{
-  copy_button::*, create_button::*, data_table::*, icons::*, input_field::*,
-  item_links::*, navbar::*, popover::*, refetch_while_focused::*,
-  store_path::*,
+  copy_button::*, create_button::*, data_table::*, footer::*, icons::*,
+  input_field::*, item_links::*, navbar::*, popover::*,
+  refetch_while_focused::*, store_path::*,
 };

crates/site-app/src/components/footer.rs

@@ -0,0 +1,31 @@
+use leptos::prelude::*;
+
+const LICENSE_HREF: &str =
+  "https://github.com/rambit-systems/rambit/blob/main/LICENSE.md";
+const PORRIDGE_CO_HREF: &str = "https://github.com/porridge-co";
+
+#[component]
+pub fn Footer() -> impl IntoView {
+  const CLASS: &str = "elevation-flat flex flex-row px-4 gap-4 items-center \
+                       h-14 rounded-b-none! mt-8 text-sm";
+  const LINK_CLASS: &str = "text-link";
+
+  view! {
+    <div class=CLASS>
+      <a
+        href=LICENSE_HREF class=LINK_CLASS
+        target="_blank" rel="noopener noreferrer"
+      >"License"</a>
+
+      <div class="flex-1" />
+
+      <p>
+        "Made with zeal by "
+        <a
+          href=PORRIDGE_CO_HREF class=LINK_CLASS
+          target="_blank" rel="noopener noreferrer"
+        >"Porridge Co."</a>
+      </p>
+    </div>
+  }
+}

crates/site-app/src/lib.rs

@@ -107,9 +107,11 @@ fn LeptosFetchDevtools() -> impl IntoView {
 fn PageContainer(children: Children) -> impl IntoView {
   view! {
     <main class="elevation-suppressed text-base-11 font-medium text-base/[1.2]">
-      <div class="page-container flex flex-col min-h-svh pb-8">
+      <div class="page-container flex flex-col min-h-svh">
         <self::components::Navbar />
         { children() }
+        <div class="flex-1" />
+        <self::components::Footer />
       </div>
     </main>
   }