feat: Add scroll-to-top button component (#340)

Author: unknown

frontend/src/components/common/ScrollToTop.tsx

@@ -0,0 +1,43 @@
+"use client"
+
+import { useEffect, useState } from 'react'
+import { ArrowUp } from 'lucide-react'
+
+export default function ScrollToTop() {
+  const [isVisible, setIsVisible] = useState(false)
+
+  useEffect(() => {
+    const toggleVisibility = () => {
+      if (window.pageYOffset > 300) {
+        setIsVisible(true)
+      } else {
+        setIsVisible(false)
+      }
+    }
+
+    window.addEventListener('scroll', toggleVisibility)
+    return () => window.removeEventListener('scroll', toggleVisibility)
+  }, [])
+
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth'
+    })
+  }
+
+  return (
+    <>
+      {isVisible && (
+        <button
+          onClick={scrollToTop}
+          aria-label="Scroll to top"
+          className="fixed bottom-6 right-6 z-50 flex items-center justify-center w-12 h-12 bg-indigo-600 text-white rounded-full shadow-lg transition-all duration-300 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 cursor-pointer"
+          tabIndex={0}
+        >
+          <ArrowUp className="w-6 h-6" />
+        </button>
+      )}
+    </>
+  )
+}