backtotop button added

package.json

@@ -1,7 +1,7 @@
 {
   "name": "celestialdocs",
   "type": "module",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "Documentation template using AstroJS and Shadcn",
   "author": "Hyperoot <[email protected]>",
   "license": "MIT",
@@ -57,4 +57,4 @@
     "prettier": "^3.3.3",
     "prettier-plugin-astro": "^0.14.1"
   }
-}
+}

src/components/core/BacktoTop.astro

@@ -0,0 +1,37 @@
+---
+import { Button } from "@/components/ui/button";
+import { ChevronUpIcon } from "lucide-react";
+---
+
+<div
+  class="transition-opacity duration-300 sticky bottom-8 flex justify-center py-4"
+>
+  <div onclick="scrollToTop()" id="back-to-top" class="w-fit">
+    <Button variant="secondary" className="gap-2" size="icon">
+      <ChevronUpIcon />
+    </Button>
+  </div>
+</div>
+
+<script is:inline>
+  const backToTopButton = document.getElementById("back-to-top");
+
+  const toggleVisibility = () => {
+    if (window.scrollY > window.innerHeight / 2) {
+      backToTopButton.classList.remove("opacity-0");
+      backToTopButton.classList.add("opacity-100");
+    } else {
+      backToTopButton.classList.remove("opacity-100");
+      backToTopButton.classList.add("opacity-0");
+    }
+  };
+
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth",
+    });
+  };
+
+  window.addEventListener("scroll", toggleVisibility);
+</script>

src/components/docs/MainContent.astro

@@ -7,6 +7,7 @@ import type { MainContentProps } from "@/lib/types";
 import { capitalizeFirstLetter } from "@/lib/utils";
 
 import { docconfig } from "config";
+import BacktoTop from "@/components/core/BacktoTop.astro";
 
 const {
   title,
@@ -21,7 +22,7 @@ const {
 } = Astro.props as MainContentProps;
 ---
 
-<div class="bg-background py-4 px-6 min-h-static_sidemenu">
+<div class="bg-background pt-4 px-6 min-h-static_sidemenu">
   {!docconfig.hide_breadcrumbs && !hide_breadcrumbs && <Breadcrumbs class="" />}
   <h1 class="pb-2 italic">{capitalizeFirstLetter(title)}</h1>
   {
@@ -39,4 +40,5 @@ const {
   <div class="prose pt-4">
     <slot />
   </div>
+  <BacktoTop />
 </div>