fix: Added scroll to top button

app/layout.tsx

@@ -1,7 +1,7 @@
 import "./globals.css";
 import { Inter } from "next/font/google";
 import { MobileNavBar } from "@/components/MobileNavbar";
-import { Navbar, Footer } from "@/components";
+import { Navbar, Footer, ScrollToTop } from "@/components";
 
 
 const inter = Inter({ subsets: ["latin"] });
@@ -25,6 +25,7 @@ export default function RootLayout({
         {children}
 
         <MobileNavBar />
+        <ScrollToTop />
         <Footer />
       </body>
     </html>

components/ScrollToTop.tsx

@@ -0,0 +1,35 @@
+"use client"
+import React, { useEffect, useState } from 'react';
+import { FaArrowUp } from 'react-icons/fa';
+
+function BackToTopButton() {
+  const [btnVisiblity, setBtnVisiblity] = useState(false);
+
+  const handleScroll = () => {
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+  useEffect(() => {
+    const toggleVisiblity = () => {
+      window.scrollY > 250 ? setBtnVisiblity(true) : setBtnVisiblity(false);
+    };
+    window.addEventListener('scroll', toggleVisiblity);
+    return () => {
+      window.removeEventListener('scroll', toggleVisiblity);
+    };
+  }, []);
+
+  return (
+    <button onClick={handleScroll}>
+      <div
+        className={` ${!btnVisiblity ? 'translate-y-32 md:translate-y-20' : 'translate-y-0'
+          } fixed bottom-20 md:bottom-10 right-8 z-50 w-10 h-10 rounded-lg bg-primary text-white cursor-pointer flex justify-center items-center transform transition-all delay-100 duration-500 `}
+      >
+        <div className="button">
+          <FaArrowUp />
+        </div>
+      </div>
+    </button>
+  );
+};
+
+export default BackToTopButton;

components/index.ts

@@ -1,3 +1,4 @@
 export { default as ProjectCard } from './ProjectCard';
 export { default as Navbar } from './Navbar';
 export { default as Footer } from './Footer';
+export { default as ScrollToTop } from './ScrollToTop';