created reusable back to top react component

client/src/App.css

@@ -844,21 +844,3 @@ footer .input-group-text {
   border-width: 2px;
   border-radius: 10px;
 }
-#scroll-btn {       
-  opacity: 0;   
-  width: 40px;
-  height: 40px;
-  color:#eae9ea;
-  background-color:#777777 ;
-  position: fixed;
-  bottom: 10%;
-  right: 10%;    
-  border: 2px solid #fff;
-  border-radius: 60%; 
-  font: bold 20px monospace;       
-  transition: opacity 0.5s, transform 0.5s;
-}
-#scroll-btn.show {      
-  opacity: 1;  
-  transition: opacity 1s, transform 1s;     
-}

client/src/constants/top-button.jsx

@@ -0,0 +1,46 @@
+import React, { useState, useEffect } from 'react';
+
+const BackToTopButton = () => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  // Scroll event listener to show/hide the button
+  const handleScroll = () => {
+    const scrollY = window.scrollY;
+    const triggerPoint = 300;
+
+    if (scrollY > triggerPoint) {
+      setIsVisible(true);
+    } else {
+      setIsVisible(false);
+    }
+  };
+
+  // Add scroll event listener when the component mounts
+  useEffect(() => {
+    window.addEventListener('scroll', handleScroll);
+
+    // Remove the event listener when the component unmounts
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
+
+  // Scroll to the top of the page
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    });
+  };
+
+  return (
+    <button
+      className={`btn btn-primary back-to-top ${isVisible ? 'visible' : 'hidden'}`}
+      onClick={scrollToTop}
+    >
+      Back to Top
+    </button>
+  );
+};
+
+export default BackToTopButton;