Add component to scroll to top

src/components/ScrollToTop.tsx

@@ -0,0 +1,32 @@
+import { useState, useEffect } from "react";
+
+export const ScrollToTop = () => {
+    const [showButton, setShowButton] = useState(false);
+    const toggleButton = () => setShowButton(window.scrollY > 100);
+    const scrollToTop = () => window.scrollTo({ top: 0, behavior: "smooth" });
+
+    useEffect(() => {
+        document.addEventListener("scroll", toggleButton);
+        return () => {
+            document.removeEventListener("scroll", toggleButton);
+        };
+    }, []);
+
+    return (
+        <button
+            onClick={scrollToTop}
+            className={`fixed bg-purple-500 hover:bg-purple-600 duration-300 w-10 h-10 rounded-full bottom-16 right-3 flex justify-center items-center ${
+                showButton || "hidden"
+            }`}
+        >
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 384 512"
+                className="w-4 h-4"
+                fill="white"
+            >
+                <path d="M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2V448c0 17.7 14.3 32 32 32s32-14.3 32-32V141.2L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z" />
+            </svg>
+        </button>
+    );
+};

src/views/Contribution.tsx

@@ -7,6 +7,7 @@ import { Footer } from "../components/Footer";
 import { useMatch } from "react-router-dom";
 import { getRouteByTag } from "../helpers/getRouteByTag";
 import { routerConfig } from "../config/router";
+import { ScrollToTop } from "../components/ScrollToTop";
 
 const Contribution = () => {
     const { router } = routerConfig;
@@ -25,6 +26,7 @@ const Contribution = () => {
                 <h1 className="m-auto">Contribution</h1>
             </div>
             <Footer text={slogan} copyright={copyright} />
+            <ScrollToTop />
         </>
     );
 };

src/views/Documentation.tsx

@@ -7,6 +7,7 @@ import { Footer } from "../components/Footer";
 import { useMatch } from "react-router-dom";
 import { getRouteByTag } from "../helpers/getRouteByTag";
 import { routerConfig } from "../config/router";
+import { ScrollToTop } from "../components/ScrollToTop";
 
 const Documentation = () => {
     const { router } = routerConfig;
@@ -25,6 +26,7 @@ const Documentation = () => {
                 <h1 className="m-auto">Documentation</h1>
             </div>
             <Footer text={slogan} copyright={copyright} />
+            <ScrollToTop />
         </>
     );
 };

src/views/Donation.tsx

@@ -4,6 +4,7 @@ import { siteConfig } from "../config/site";
 import { setPageTitle } from "../helpers/setPageTitle";
 import { Navigation } from "../components/Navigation";
 import { Footer } from "../components/Footer";
+import { ScrollToTop } from "../components/ScrollToTop";
 
 const Donation = () => {
     const { slogan, copyright } = siteConfig;
@@ -17,6 +18,7 @@ const Donation = () => {
                 <h1 className="m-auto">Donation</h1>
             </div>
             <Footer text={slogan} copyright={copyright} />
+            <ScrollToTop />
         </>
     );
 };

src/views/Features.tsx

@@ -4,6 +4,7 @@ import { setPageTitle } from "../helpers/setPageTitle";
 import { Navigation } from "../components/Navigation";
 import { Footer } from "../components/Footer";
 import { siteConfig } from "../config/site";
+import { ScrollToTop } from "../components/ScrollToTop";
 
 const Features = () => {
     const { slogan, copyright } = siteConfig;
@@ -17,6 +18,7 @@ const Features = () => {
                 <h1 className="m-auto">Features</h1>
             </div>
             <Footer text={slogan} copyright={copyright} />
+            <ScrollToTop />
         </>
     );
 };

src/views/Home.tsx

@@ -8,6 +8,7 @@ import { routerConfig } from "../config/router";
 import { getBaseUri } from "../helpers/getBaseUri";
 import { Navigation } from "../components/Navigation";
 import heroImage from "../assets/images/hero.webp";
+import { ScrollToTop } from "../components/ScrollToTop";
 
 const Home = () => {
     const { router } = routerConfig;
@@ -42,6 +43,7 @@ const Home = () => {
                 secondary={description}
             />
             <Footer text={slogan} copyright={copyright} />
+            <ScrollToTop />
         </>
     );
 };