feat:- added back to top button (#46)

Author: pavanydg

src/app/blog/[slug]/page.tsx

@@ -11,6 +11,8 @@ import CodeBlock from '@/components/CodeBlock';
 import { Callout } from '@/components/Callout';
 import { Alert, AlertDescription } from '@/components/Alert';
 import { MDXComponents } from 'mdx/types';
+import BackToTop from '@/components/BackToTop';
+
 
 const generateId = (children: any) => {
     if (Array.isArray(children)) {
@@ -73,6 +75,7 @@ export default async function BlogPost({params}: { params: { slug: string } }) {
                     </div>
                 </aside>
             </div>
+                <BackToTop />
         </div>
     )
 }

src/components/BackToTop.tsx

@@ -0,0 +1,50 @@
+"use client"
+
+import { ArrowUp } from "lucide-react";
+import { useEffect, useState } from "react"
+
+const BackToTop = () => {
+    const [isVisible, setIsVisible] = useState(false);
+
+    useEffect(() => {
+        if (typeof window === "undefined") return;
+
+        const handleScroll = () => {
+            const scrolled = window.scrollY;
+            setIsVisible(scrolled > 300);
+        };
+
+        window.addEventListener('scroll', handleScroll);
+
+        handleScroll();
+
+        return () => {
+            if (typeof window !== "undefined") {
+                window.removeEventListener('scroll', handleScroll);
+            }
+        };
+    }, []);
+
+    const scrollToTop = () => {
+        if (typeof window === "undefined") return;
+
+        window.scrollTo({
+            top: 0,
+            behavior: "smooth"
+        });
+    };
+
+    return (
+        <div className="fixed bottom-20 right-4 z-50">
+            <button
+                onClick={scrollToTop}
+                className={`bg-blue-500 text-white p-3 rounded-full shadow-lg hover:bg-blue-600 transition-opacity ${isVisible ? "opacity-100" : "opacity-0 pointer-events-none"
+                    }`}
+            >
+                <ArrowUp />
+            </button>
+        </div>
+    );
+};
+
+export default BackToTop;