diff --git a/src/components/Backtotop.tsx b/src/components/Backtotop.tsx new file mode 100644 index 00000000..f68c63c3 --- /dev/null +++ b/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 && ( + + )} + + ); +}; + +export default BackToTopButton; \ No newline at end of file diff --git a/src/pages/Contributors/Contributors.tsx b/src/pages/Contributors/Contributors.tsx index d4fee52c..d3b639b7 100644 --- a/src/pages/Contributors/Contributors.tsx +++ b/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 = () => { ))} + ); diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx index 03759ab4..86e1456f 100644 --- a/src/pages/Home/Home.tsx +++ b/src/pages/Home/Home.tsx @@ -1,6 +1,7 @@ import Hero from "../../components/Hero"; import HowItWorks from "../../components/HowItWorks"; import Features from "../../components/Features"; +import BackToTopButton from "../../components/Backtotop"; function Home() { return ( @@ -8,7 +9,7 @@ function Home() { - + ) } diff --git a/src/pages/Tracker/Tracker.tsx b/src/pages/Tracker/Tracker.tsx index 576f39bf..1797f6c0 100644 --- a/src/pages/Tracker/Tracker.tsx +++ b/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 = () => { )} + ); };