From 3e81efdc5cfbc17ab7764b6f57600547aecb135a Mon Sep 17 00:00:00 2001
From: Luiz Junio <luisjuniorbr@gmail.com>
Date: Fri, 19 Apr 2024 00:55:34 +0000
Subject: [PATCH] =?UTF-8?q?Adi=C3=A7=C3=A3o=20do=20bot=C3=A3o=20para=20vol?=
 =?UTF-8?q?tar=20para=20o=20topo=20da=20pagina?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/back_to_top.rs | 33 +++++++++++++++++++++++++++++++++
 src/components/mod.rs         |  1 +
 src/pages/base.rs             |  5 +++++
 src/pages/posts.rs            |  2 +-
 src/pages/projects.rs         |  2 +-
 5 files changed, 41 insertions(+), 2 deletions(-)
 create mode 100644 src/components/back_to_top.rs

diff --git a/src/components/back_to_top.rs b/src/components/back_to_top.rs
new file mode 100644
index 0000000..d5d0917
--- /dev/null
+++ b/src/components/back_to_top.rs
@@ -0,0 +1,33 @@
+use crate::components::button::LinkBtn;
+use leptos::*;
+use leptos_use::use_window_scroll;
+use web_sys::{ScrollBehavior, ScrollToOptions};
+
+#[component]
+pub fn BackToTopBtn() -> impl IntoView {
+    let (_, y) = use_window_scroll();
+
+    let opacity_btn = move || {
+        if y() > 300.0 {
+            1
+        } else {
+            0
+        }
+    };
+
+    let on_click_go_to_top = |_| {
+        window().scroll_to_with_scroll_to_options(
+            ScrollToOptions::new()
+                .behavior(ScrollBehavior::Smooth)
+                .top(0.0),
+        );
+    };
+
+    view! {
+        <div style:opacity=opacity_btn class="tw-fixed tw-bottom-4 tw-right-4 tw-transition-opacity tw-duration-700 tw-ease-in-out">
+            <LinkBtn href="#" on:click=on_click_go_to_top>
+                <i class="fa-solid fa-chevron-up"/>
+            </LinkBtn>
+        </div>
+    }
+}
diff --git a/src/components/mod.rs b/src/components/mod.rs
index fc56e2d..7ca4312 100644
--- a/src/components/mod.rs
+++ b/src/components/mod.rs
@@ -1,3 +1,4 @@
+pub mod back_to_top;
 pub mod button;
 pub mod card;
 pub mod content;
diff --git a/src/pages/base.rs b/src/pages/base.rs
index 02db6c9..e186983 100644
--- a/src/pages/base.rs
+++ b/src/pages/base.rs
@@ -1,12 +1,14 @@
 use leptos::*;
 use leptos_meta::Title;
 
+use crate::components::back_to_top::BackToTopBtn;
 use crate::components::card::Card;
 
 #[component]
 pub fn BasePage(
     #[prop(optional, into)] title: String,
     #[prop(optional, into)] class: String,
+    #[prop(optional, into)] enable_back_to_top: bool,
     children: Children,
 ) -> impl IntoView {
     view! {
@@ -16,5 +18,8 @@ pub fn BasePage(
                 {children()}
             </Card>
         </div>
+        <Show when=move || enable_back_to_top>
+            <BackToTopBtn/>
+        </Show>
     }
 }
diff --git a/src/pages/posts.rs b/src/pages/posts.rs
index bc31892..dbae0d4 100644
--- a/src/pages/posts.rs
+++ b/src/pages/posts.rs
@@ -76,7 +76,7 @@ fn PostContentPage(post: PostData) -> impl IntoView {
     let bg_img = post.metadata.front_image.map(|bg| format!("url({bg})"));
 
     view! {
-        <BasePage title=post.metadata.title.clone()>
+        <BasePage title=post.metadata.title.clone() enable_back_to_top=true>
             <BaseContent
                 title=post.metadata.title
                 bg_color=post.metadata.front_color
diff --git a/src/pages/projects.rs b/src/pages/projects.rs
index 8c499a1..6384130 100644
--- a/src/pages/projects.rs
+++ b/src/pages/projects.rs
@@ -85,7 +85,7 @@ fn ProjectContentPage(post: PostData) -> impl IntoView {
     let bg_img = post.metadata.front_image.map(|bg| format!("url({bg})"));
 
     view! {
-        <BasePage title=post.metadata.title.clone()>
+        <BasePage title=post.metadata.title.clone() enable_back_to_top=true>
             <BaseContent
                 title=post.metadata.title
                 bg_color=post.metadata.front_color