Adição do botão para voltar para o topo da pagina

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>
+    }
+}

src/components/mod.rs

@@ -1,3 +1,4 @@
+pub mod back_to_top;
 pub mod button;
 pub mod card;
 pub mod content;

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>
     }
 }

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

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