add scroll to top button

src/App.tsx

@@ -13,6 +13,7 @@ import Wishlist from "./pages/Wishlist";
 import ProtectedRoute from "./components/ProtectedRoute";
 import Profile from "./pages/Profile";
 import AllProducts from "./pages/AllProducts";
+import ScrollToTopButton from "./components/ScrollToTopButton";
 
 function App() {
   return (
@@ -33,6 +34,7 @@ function App() {
       <Footer />
       <Cart />
       <LoginModal />
+      <ScrollToTopButton />
     </Provider>
   );
 }

src/components/ScrollToTopButton.tsx

@@ -0,0 +1,41 @@
+import React, { useState, useEffect } from "react";
+import { IoIosArrowUp } from "react-icons/io";
+
+const ScrollToTopButton: React.FC = () => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  const toggleVisibility = () => {
+    if (window.scrollY > 300) {
+      setIsVisible(true);
+    } else {
+      setIsVisible(false);
+    }
+  };
+
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth",
+    });
+  };
+
+  useEffect(() => {
+    window.addEventListener("scroll", toggleVisibility);
+    return () => window.removeEventListener("scroll", toggleVisibility);
+  }, []);
+
+  return (
+    <div className="fixed bottom-10 right-8 z-50">
+      {isVisible && (
+        <button
+          onClick={scrollToTop}
+          className="bg-gray-800 text-white rounded-full h-10 w-10 shadow-md hover:bg-gray-700 transition-opacity duration-300 opacity-50 hover:opacity-100"
+        >
+          <IoIosArrowUp size={30} className="m-auto" />
+        </button>
+      )}
+    </div>
+  );
+};
+
+export default ScrollToTopButton;