Merge pull request #149 from AsmitaMishra24/main2

feat: Added Back-To-Top Button

client/package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-free": "^6.6.0",
     "@reduxjs/toolkit": "^1.9.6",
     "axios": "^1.6.2",
     "hamburger-react": "^2.5.0",
@@ -21,6 +22,7 @@
     "react-razorpay": "^2.0.1",
     "react-redux": "^8.1.2",
     "react-router-dom": "^6.16.0",
+    "react-scroll": "^1.9.0",
     "redux-persist": "^6.0.0"
   },
   "devDependencies": {

client/src/components/BackToTop/BackToTop.jsx

@@ -0,0 +1,45 @@
+import React, { useState, useEffect } from "react";
+import { animateScroll } from 'react-scroll';
+import '@fortawesome/fontawesome-free/css/all.min.css';
+
+const BackToTop = () => {
+  const [showButton, setShowButton] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      if (window.scrollY > 90) {
+        setShowButton(true);
+      } else {
+        setShowButton(false);
+      }
+    };
+
+    window.addEventListener("scroll", handleScroll);
+
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, []);
+
+  const handleClick = () => {
+    animateScroll.scrollToTop({
+      top: 0,
+      behavior: "smooth",
+      duration: 200
+    });
+  };
+
+  return (
+    <>
+      <button
+        className={`fixed bottom-5 right-5 z-50 bg-black text-white border-2 border-black p-2 text-sm cursor-pointer transition-all duration-300 rounded-full flex items-center justify-center w-10 h-10
+          ${showButton ? 'opacity-100' : 'opacity-0'} hover:bg-white hover:text-black hover:border-black focus:outline-none active:translate-y-1`}
+        onClick={handleClick}
+      >
+        <i className="fas fa-arrow-up text-xl"></i>
+      </button>
+    </>
+  );
+};
+
+export default BackToTop;

client/src/components/layout.jsx

@@ -3,6 +3,7 @@ import Navbar from "./Navbar/navbar";
 import { Outlet } from "react-router-dom";
 import Footer from "./Footer";
 import Preloader from "./Preloader/Preloader";
+import BackToTop from "./BackToTop/BackToTop";
 
 const Layout = () => {
     return (
@@ -13,6 +14,7 @@ const Layout = () => {
             </div>
             <Footer />
             <Preloader />
+            <BackToTop/>
         </>
     );
 };