navigation button

Author: StackOverflowIsBetterThanAnyAI

src/components/navigation/Navigation.tsx

@@ -1,15 +1,38 @@
 'use client'
 
+import { useContext, useRef, useState } from 'react'
 import NavigationLogo from './NavigationLogo'
-import { useRef, useState } from 'react'
+import { Button } from '@/components/ui/button'
+import { ContextTopTenPosts } from '@/context/ContextTopTenPosts'
 import { useNavigationOpacity } from '@/hooks/useNavigationOpacity'
+import NavigationButton from './NavigationButton'
 
 const Navigation = () => {
+    const contextTopTenPosts = useContext(ContextTopTenPosts)
+    if (!contextTopTenPosts) {
+        throw new Error(
+            'Feed must be used within a ContextTopTenPosts.Provider'
+        )
+    }
+    const topTenPostsRef = contextTopTenPosts
+
     const [navOpacity, setNavOpacity] = useState<string>('opacity-100')
     const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 
     useNavigationOpacity({ setNavOpacity, timerRef })
 
+    const handleScrollToTopTenPosts = () => {
+        if (topTenPostsRef.current) {
+            const OFFSET = 64
+            const top =
+                topTenPostsRef.current.getBoundingClientRect().top +
+                window.scrollY -
+                OFFSET
+
+            window.scrollTo({ top, behavior: 'smooth' })
+        }
+    }
+
     return (
         <nav
             className={`sticky top-0 z-50 w-full transition-opacity duration-1000 ease-in-out ${navOpacity}
@@ -18,6 +41,11 @@ const Navigation = () => {
         >
             <div className="max-w-7xl flex items-center justify-between m-auto h-16 px-2 sm:px-4 py-1 md:py-2">
                 <NavigationLogo />
+
+                <NavigationButton
+                    handleScroll={handleScrollToTopTenPosts}
+                    label="Top 10 Posts"
+                />
             </div>
         </nav>
     )

src/components/navigation/NavigationButton.tsx

@@ -0,0 +1,20 @@
+import { Button } from '@/components/ui/button'
+
+type NavigationButtonProps = { handleScroll: () => void; label: string }
+
+const NavigationButton = ({ handleScroll, label }: NavigationButtonProps) => {
+    return (
+        <Button asChild variant="ghost" className="px-4">
+            <button
+                className="text-normal"
+                aria-label={`Scroll to ${label}`}
+                title={`Scroll to ${label}`}
+                onClick={handleScroll}
+            >
+                {label}
+            </button>
+        </Button>
+    )
+}
+
+export default NavigationButton