All gucci!

islands/ScrollUpButton.tsx

@@ -0,0 +1,45 @@
+import { useSignal } from "@preact/signals";
+import { useEffect } from "preact/hooks";
+import { LuArrowUp } from "@preact-icons/lu";
+
+export default function ScrollUpButton() {
+  const isVisible = useSignal(false);
+
+  useEffect(() => {
+    const checkScroll = () => {
+      isVisible.value = globalThis.scrollY > 300;
+    };
+
+    checkScroll();
+
+    globalThis.addEventListener("scroll", checkScroll);
+
+    return () => {
+      globalThis.removeEventListener("scroll", checkScroll);
+    };
+  }, []);
+
+  const scrollToTop = () => {
+    globalThis.scrollTo({
+      top: 0,
+      behavior: "smooth",
+    });
+  };
+
+  return (
+    <button
+      type="button"
+      onClick={scrollToTop}
+      class={`fixed bottom-20 right-4 z-20 bg-secondary hover:bg-primary
+            p-3 rounded-full shadow-lg transition-all duration-300
+            ${
+        isVisible.value
+          ? "opacity-70 translate-y-0"
+          : "opacity-0 translate-y-10 pointer-events-none"
+      }`}
+      aria-label="Scroll to top"
+    >
+      <LuArrowUp class="text-lg" />
+    </button>
+  );
+}