Back to top button added

Author: Souradeep858

src/components/Backtotop.tsx

@@ -0,0 +1,45 @@
+import React, { useEffect, useState } from "react";
+import { ArrowUp } from "lucide-react";
+
+const BackToTopButton: React.FC = () => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    const toggleVisibility = () => {
+      if (window.scrollY > 300) {
+        setIsVisible(true);
+      } else {
+        setIsVisible(false);
+      }
+    };
+
+    window.addEventListener("scroll", toggleVisibility);
+
+    return () => {
+      window.removeEventListener("scroll", toggleVisibility);
+    };
+  }, []);
+
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth",
+    });
+  };
+
+  return (
+    <>
+      {isVisible && (
+        <button
+          onClick={scrollToTop}
+          aria-label="Back to top"
+          className="fixed bottom-6 right-6 z-50 flex h-12 w-12 items-center justify-center rounded-full bg-green-500 text-white shadow-lg transition-all duration-300 hover:scale-110 hover:bg-green-600"
+        >
+          <ArrowUp size={22} />
+        </button>
+      )}
+    </>
+  );
+};
+
+export default BackToTopButton;

src/pages/Contributors/Contributors.tsx

@@ -15,6 +15,7 @@ import { FaGithub } from "react-icons/fa";
 import { Link } from "react-router-dom";
 import axios from "axios";
 import { GITHUB_REPO_CONTRIBUTORS_URL } from "../../utils/constants";
+import BackToTopButton from "../../components/Backtotop";
 
 interface Contributor {
   id: number;
@@ -136,6 +137,7 @@ const ContributorsPage = () => {
             </Grid>
           ))}
         </Grid>
+        <BackToTopButton/>
       </Container>
     </div>
   );

src/pages/Home/Home.tsx

@@ -1,14 +1,15 @@
 import Hero from "../../components/Hero";
 import HowItWorks from "../../components/HowItWorks";
 import Features from "../../components/Features";
+import BackToTopButton from "../../components/Backtotop";
 
 function Home() {
   return (
     <div className="">
         <Hero />
         <Features />
         <HowItWorks />
-
+        <BackToTopButton/>
     </div>
   )
 }

src/pages/Tracker/Tracker.tsx

@@ -33,6 +33,7 @@ import { useTheme } from "@mui/material/styles";
 import { useGitHubAuth } from "../../hooks/useGitHubAuth";
 import { useGitHubData } from "../../hooks/useGitHubData";
 import { KeyIcon } from "lucide-react";
+import BackToTopButton from "../../components/Backtotop";
 
 const ROWS_PER_PAGE = 10;
 
@@ -396,6 +397,7 @@ const Home: React.FC = () => {
           </TableContainer>
         </Box>
       )}
+      <BackToTopButton/>
     </Container>
   );
 };