From 8cb3a38beb98824534de88f4c0a268abc9a3775a Mon Sep 17 00:00:00 2001
From: Rainnny7 <braydonrainnny@gmail.com>
Date: Mon, 7 Oct 2024 12:57:15 -0400
Subject: [PATCH] on this page scroll to top button

Took 11 minutes
---
 src/components/on-this-page.tsx | 67 ++++++++++++++++++++++-----------
 1 file changed, 46 insertions(+), 21 deletions(-)

diff --git a/src/components/on-this-page.tsx b/src/components/on-this-page.tsx
index b503e46..6038087 100644
--- a/src/components/on-this-page.tsx
+++ b/src/components/on-this-page.tsx
@@ -10,7 +10,7 @@ import { cn } from "@/lib/utils";
 import { truncateText } from "@/lib/string";
 import { motion, useInView } from "framer-motion";
 import { Separator } from "@/components/ui/separator";
-import Image from "next/image";
+import { Button } from "@/components/ui/button";
 
 type Header = {
     id: string;
@@ -137,25 +137,50 @@ const OnThisPage = ({ page }: { page: DocsContentMetadata }): ReactElement => {
     );
 };
 
-const Footer = ({ page }: { page: DocsContentMetadata }): ReactElement => (
-    <footer className="flex flex-col text-xs opacity-75">
-        {/* Edit on Git */}
-        <Link
-            className="flex gap-1.5 items-center hover:opacity-75 transition-all transform-gpu group"
-            href={`https://git.rainnny.club/PulseApp/docs/src/branch/master/docs/${page.slug}.md`}
-            target="_blank"
-            draggable={false}
-        >
-            <Image
-                src="/media/github.svg"
-                alt="GitHub Logo"
-                width={13}
-                height={13}
-            />
-            <span>Edit this page on GitHub</span>
-            <ArrowLongRightIcon className="w-4 h-4 group-hover:translate-x-0.5 transition-all transform-gpu" />
-        </Link>
-    </footer>
-);
+const Footer = ({ page }: { page: DocsContentMetadata }): ReactElement => {
+    const [hasScrolled, setHasScrolled] = useState<boolean>(false);
+
+    useEffect(() => {
+        const handleScroll = () => setHasScrolled(window.scrollY > 400);
+        window.addEventListener("scroll", handleScroll);
+        return () => window.removeEventListener("scroll", handleScroll);
+    }, []);
+
+    return (
+        <footer className="flex flex-col opacity-75">
+            {/* Edit on Git */}
+            <Link
+                className="flex gap-1.5 items-center text-xs hover:opacity-75 transition-all transform-gpu group"
+                href={`https://git.rainnny.club/PulseApp/docs/src/branch/master/docs/${page.slug}.md`}
+                target="_blank"
+                draggable={false}
+            >
+                <span>Edit this page on GitHub</span>
+                <ArrowLongRightIcon className="w-4 h-4 group-hover:translate-x-0.5 transition-all transform-gpu" />
+            </Link>
+
+            {/* Scroll to Top */}
+            <div
+                className={cn(
+                    "transition-opacity transform-gpu",
+                    hasScrolled
+                        ? "opacity-100"
+                        : "opacity-0 pointer-events-none"
+                )}
+            >
+                <Button
+                    className="p-0 justify-start flex gap-1.5 items-center text-xs hover:bg-transparent hover:opacity-75 transition-all transform-gpu group"
+                    variant="ghost"
+                    onClick={() =>
+                        window.scrollTo({ top: 0, behavior: "smooth" })
+                    }
+                >
+                    <span>Scroll to Top</span>
+                    <ArrowLongRightIcon className="w-4 h-4 group-hover:translate-x-0.5 transition-all transform-gpu" />
+                </Button>
+            </div>
+        </footer>
+    );
+};
 
 export default OnThisPage;