Finalized

src/components/ScrollUpButton.tsx

@@ -0,0 +1,45 @@
+import { useSignal } from "@preact/signals";
+import { useEffect } from "preact/hooks";
+import { ArrowUp } from 'lucide-preact';
+
+export default function ScrollUpButton() {
+  const isVisible = useSignal(false);
+
+  useEffect(() => {
+    const checkScroll = () => {
+      isVisible.value = window.scrollY > 300;
+    };
+
+    checkScroll();
+
+    window.addEventListener("scroll", checkScroll);
+
+    return () => {
+      window.removeEventListener("scroll", checkScroll);
+    };
+  }, []);
+
+  const scrollToTop = () => {
+    window.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"
+    >
+      <ArrowUp class="text-lg" />
+    </button>
+  );
+}