feat: ui add to top components

Author: yayxs

src/app/layout.tsx

@@ -2,8 +2,9 @@ import type { Metadata } from 'next'
 import { Inter } from 'next/font/google'
 import './globals.css'
 import type { ReactNode } from 'react'
-import { BackgroundBeamsWithCollision } from '@/components/ui/background-beams-with-collision'
+import { BackgroundBeamsWithCollision } from '@/components/ui/BeamsWithCollision'
 import { Header } from '@/components/ui/header'
+import { ScrollToTop } from '@/components/ui/ScrollToTop'
 
 const inter = Inter({ subsets: ['latin'] })
 
@@ -26,6 +27,7 @@ export default function RootLayout({ children }: { children: ReactNode }) {
             {children}
           </div>
         </main>
+        <ScrollToTop />
       </body>
     </html>
   )

src/components/ui/background-beams-with-collision.tsx src/components/ui/BeamsWithCollision.tsx

@@ -0,0 +1,42 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { Button } from './button'
+import { ArrowUp } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+export const ScrollToTop = () => {
+  const [isVisible, setIsVisible] = useState(false)
+
+  const handleScroll = () => {
+    const scrollY = window.scrollY
+    setIsVisible(scrollY > 200)
+  }
+
+  const handleScrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth'
+    })
+  }
+
+  useEffect(() => {
+    window.addEventListener('scroll', handleScroll)
+    return () => window.removeEventListener('scroll', handleScroll)
+  }, [])
+
+  return (
+    <Button
+      variant="outline"
+      size="icon"
+      className={cn(
+        'fixed bottom-8 right-8 z-50 rounded-full shadow-lg transition-all duration-300',
+        isVisible ? 'translate-y-0 opacity-100' : 'translate-y-28 opacity-0'
+      )}
+      onClick={handleScrollToTop}
+      aria-label="返回顶部"
+    >
+      <ArrowUp className="h-4 w-4" />
+    </Button>
+  )
+}