Add scroll to top button

src/components/layout/scroll-to-top-button.tsx

@@ -0,0 +1,36 @@
+import { useEffect, useState } from "react";
+import { Button } from "../ui/button";
+import { ArrowUpIcon } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+export function ScrollToTopButton() {
+  const [isVisible, setIsVisible] = useState(false);
+
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth",
+    });
+  };
+
+  useEffect(() => {
+    const toggleVisibility = () => {
+      setIsVisible(window.scrollY > 300);
+    };
+    window.addEventListener("scroll", toggleVisibility);
+    return () => window.removeEventListener("scroll", toggleVisibility);
+  }, []);
+
+  return (
+    <div
+      className={cn("fixed bottom-14 right-4 z-50 transition-opacity duration-300", {
+        "opacity-100": isVisible,
+        "pointer-events-none z-0 opacity-0": !isVisible,
+      })}
+    >
+      <Button onClick={scrollToTop} size="icon">
+        <ArrowUpIcon className="h-6 w-6" />
+      </Button>
+    </div>
+  );
+}

src/main.tsx

@@ -11,6 +11,7 @@ import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import "./styles/global.css";
 import { useAuthStore } from "./stores/auth";
 import { Loader2 } from "lucide-react";
+import { ScrollToTopButton } from "./components/layout/scroll-to-top-button";
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -87,6 +88,7 @@ export function App() {
       )}
       <RouterProvider router={router} context={routerContext} />
       <Toaster />
+      <ScrollToTopButton />
     </QueryClientProvider>
   );
 }