Merge pull request #204 from AsmitaMishra24/main

Added Back-To-Top Button

app/(routes)/page.tsx

@@ -4,6 +4,7 @@ import Container from "@/components/ui/container";
 import getProducts from "@/actions/get-products";
 import ProductList from "@/components/product-list";
 import Billboard from "@/components/ui/billboard";
+import BackToTop from "@/components/ui/BacktoTop";
 
 // Sample reviews (you can customize these)
 const sampleReviews = [
@@ -92,6 +93,7 @@ const HomePage: React.FC = async () => {
           <h2 className="text-2xl font-semibold">Customer Reviews</h2>
           <CustomerReviews reviews={sampleReviews} />
         </div>
+        <BackToTop />
       </div>
     </Container>
   );

app/(routes)/product/[productId]/page.tsx

@@ -4,6 +4,7 @@ import Info from "@/components/info";
 import getProduct from "@/actions/get-product";
 import getProducts from "@/actions/get-products";
 import Container from "@/components/ui/container";
+import BackToTop from "@/components/ui/BacktoTop";
 
 export const revalidate = 60;
 
@@ -37,6 +38,7 @@ const ProductPage: React.FC<ProductPageProps> = async ({ params }) => {
           <ProductList title="Related Items" items={suggestedProducts} />
         </div>
       </Container>
+      <BackToTop />
     </div>
   );
 };

app/(routes)/wishlist/page.tsx

@@ -6,6 +6,7 @@ import Container from "@/components/ui/container";
 import useWishlist from "@/hooks/use-wishlist";
 
 import WishlistItem from "./components/wishlist-item";
+import BackToTop from "@/components/ui/BacktoTop";
 
 const CartPage = () => {
   const [isMounted, setIsMounted] = useState(false);
@@ -35,6 +36,7 @@ const CartPage = () => {
           </div>
         </div>
       </Container>
+      <BackToTop />
     </div>
   );
 };

app/layout.tsx

@@ -9,6 +9,7 @@ import Navbar from '@/components/navbar'
 import Footer from '@/components/footer'
 import AnimatedCursor from 'react-animated-cursor'
 import './globals.css'
+import BackToTop from '@/components/ui/BacktoTop'
 
 const font = Urbanist({ subsets: ['latin'] })
 
@@ -57,6 +58,7 @@ export default function RootLayout({
 
         {children}
         <SpeedInsights /> 
+        <BackToTop />
         <Footer />
       </body>
     </html>

components/gallery/gallery-tab.tsx

@@ -3,6 +3,7 @@ import { Tab } from "@headlessui/react";
 
 import { cn } from "@/lib/utils";
 import { Image } from "@/types";
+import BackToTop from "../ui/BacktoTop";
 
 interface GalleryTabProps {
   image: Image;
@@ -32,6 +33,7 @@ const GalleryTab: React.FC<GalleryTabProps> = ({
               selected ? 'ring-black' : 'ring-transparent',
             )}
           />
+          <BackToTop />
         </div>
       )}
     </Tab>

components/ui/BacktoTop.tsx

@@ -0,0 +1,84 @@
+'use client';
+
+import React, { useState, useEffect, CSSProperties } from "react";
+import { animateScroll } from 'react-scroll';
+import '@fortawesome/fontawesome-free/css/all.min.css';
+
+const BackToTop: React.FC = () => {
+  const [showButton, setShowButton] = useState<boolean>(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      if (window.scrollY > 80) {
+        setShowButton(true);
+      } else {
+        setShowButton(false);
+      }
+    };
+
+    window.addEventListener("scroll", handleScroll);
+
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, []);
+
+  const handleClick = () => {
+    animateScroll.scrollToTop({
+      top: 0,
+      behavior: "smooth",
+      duration: 500
+    });
+  };
+
+  const buttonStyles: CSSProperties = {
+    position: 'fixed',
+    bottom: '20px',
+    right: '18px',
+    zIndex: 1000,
+    backgroundColor: '#2A54CA',
+    color: '#ffffff',
+    border: 'none',
+    padding: '10px',
+    fontSize: '14px',
+    cursor: 'pointer',
+    opacity: showButton ? 1 : 0,
+    transition: 'opacity 0.1s ease',
+    borderRadius: '60%',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '42px',
+    height: '42px'
+  };
+
+  const iconStyles: CSSProperties = {
+    fontSize: '20px'
+  };
+
+  return (
+    <>
+      <style>{`
+        .back-to-top:hover {
+          background-color: #0F172A !important;
+          color: #ffffff !important;
+        }
+        .back-to-top:focus {
+          outline: none;
+        }
+        .back-to-top:active {
+          transform: translateY(1px);
+        }
+      `}</style>
+      <button
+        className="back-to-top"
+        onClick={handleClick}
+        style={buttonStyles}
+      >
+        <i className="fas fa-arrow-up" style={iconStyles}></i>
+      </button>
+    </>
+  );
+};
+
+export default BackToTop;

package.json

@@ -11,12 +11,13 @@
   },
   "dependencies": {
     "@auth/unstorage-adapter": "^2.4.1",
+    "@fortawesome/fontawesome-free": "^6.5.2",
     "@headlessui/react": "^1.7.15",
     "@radix-ui/react-avatar": "^1.1.0",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-slot": "^1.1.0",
     "@react-oauth/google": "^0.12.1",
-    "@types/react-dom": "18.2.4",
+    "@types/react-dom": "^18.2.4",
     "@vercel/kv": "^1.0.1",
     "@vercel/speed-insights": "^1.0.10",
     "animated-cursor": "^1.2.0",
@@ -41,6 +42,7 @@
     "react-hot-toast": "^2.4.1",
     "react-marquee-slider": "^1.1.5",
     "react-rating-stars-component": "^2.2.0",
+    "react-scroll": "^1.9.0",
     "react-spinners": "^0.13.8",
     "react-tilt": "^1.0.2",
     "swiper": "^11.1.4",