Merge pull request #14 from BakerNet/footer

Add footer
BakerNet · Oct 6, 2024 · fa32028 · fa32028
2 parents 1992f85 + 9b9c50b
commit fa32028
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 2 deletions.
diff --git a/web/src/app.rs b/web/src/app.rs
@@ -1,5 +1,6 @@
 mod auth;
 mod error_template;
+mod footer;
 mod header;
 mod home;
 mod login;

diff --git a/web/src/app/footer.rs b/web/src/app/footer.rs
@@ -0,0 +1,18 @@
+use leptos::*;
+
+use crate::components::socials::{GitHubSocial, LinkedInSocial};
+
+#[component]
+pub fn Footer() -> impl IntoView {
+    view! {
+        <footer class="relative h-16 space-y-2 px-4 py-2 border-t border-gray-800">
+            <div class="flex items-center justify-center mx-auto w-8/12 h-full space-x-2 text-gray-900 dark:text-gray-100">
+                Developed by a minesweeper nerd
+            </div>
+            <div class="absolute top-2 right-2 flex items-center space-x-2">
+                <LinkedInSocial />
+                <GitHubSocial />
+            </div>
+        </footer>
+    }
+}
diff --git a/web/src/app/root.rs b/web/src/app/root.rs
@@ -2,7 +2,10 @@ use leptos::*;
 use leptos_meta::*;
 use leptos_router::*;
 
-use crate::components::info::{use_controls_info_keybinds, ControlsInfoButton, ControlsInfoModal};
+use crate::{
+    app::footer::Footer,
+    components::info::{use_controls_info_keybinds, ControlsInfoButton, ControlsInfoModal},
+};
 
 use super::{
     auth::{get_frontend_user, LogIn, LogOut},
@@ -72,6 +75,7 @@ pub fn App() -> impl IntoView {
                         <Route path="/" view=GameView />
                     </Route>
                 </Routes>
+                <Footer />
                 <ControlsInfoButton set_show_info />
                 <Show when=show_info>
                     <ControlsInfoModal set_show_info />

diff --git a/web/src/components.rs b/web/src/components.rs
@@ -1,6 +1,7 @@
 pub mod dark_mode;
 pub mod icons;
 pub mod info;
+pub mod socials;
 
 #[macro_export]
 macro_rules! input_class {

diff --git a/web/src/components/info.rs b/web/src/components/info.rs
@@ -12,7 +12,7 @@ pub fn ControlsInfoButton(set_show_info: WriteSignal<bool>) -> impl IntoView {
     view! {
         <button
             type="button"
-            class="fixed bottom-2 sm:bottom-8 right-2 sm:right-8 text-4xl h-12 w-12 rounded-full border border-black bg-white text-gray-900"
+            class="fixed bottom-2 left-2 sm:right-8 text-4xl h-12 w-12 rounded-full border border-black bg-white text-gray-900"
             on:click=move |_| set_show_info(true)
         >
             "?"

diff --git a/web/src/components/socials.rs b/web/src/components/socials.rs
@@ -0,0 +1,35 @@
+use leptos::*;
+
+#[component]
+pub fn GitHubSocial() -> impl IntoView {
+    view! {
+        <a href="https://github.com/BakerNet" class="h-8 w-8">
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="16"
+                height="16"
+                viewBox="0 0 16 16"
+                class="fill-black dark:fill-white object-cover h-full w-full"
+            >
+                <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8" />
+            </svg>
+        </a>
+    }
+}
+
+#[component]
+pub fn LinkedInSocial() -> impl IntoView {
+    view! {
+        <a href="https://linkedin.com/in/hansbaker" class="h-8 w-8">
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="16"
+                height="16"
+                viewBox="0 0 16 16"
+                class="fill-blue-600 dark:fill-white object-cover h-full w-full"
+            >
+                <path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z" />
+            </svg>
+        </a>
+    }
+}