top users

Author: StackOverflowIsBetterThanAnyAI

src/components/navigation/Navigation.tsx

@@ -3,23 +3,44 @@
 import { useContext, useRef, useState } from 'react'
 import NavigationLogo from './NavigationLogo'
 import { ContextTopTenPosts } from '@/context/ContextTopTenPosts'
+import { ContextTopUsers } from '@/context/ContextTopUsers'
 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'
+            'Navigation must be used within a ContextTopTenPosts.Provider'
         )
     }
     const topTenPostsRef = contextTopTenPosts
 
+    const contextTopUsers = useContext(ContextTopUsers)
+    if (!contextTopUsers) {
+        throw new Error(
+            'Navigation must be used within a ContextTopUsers.Provider'
+        )
+    }
+    const topUsersRef = contextTopUsers
+
     const [navOpacity, setNavOpacity] = useState<string>('opacity-100')
     const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 
     useNavigationOpacity({ setNavOpacity, timerRef })
 
+    const handleScrollToTopUsers = () => {
+        if (topUsersRef.current) {
+            const OFFSET = 64
+            const top =
+                topUsersRef.current.getBoundingClientRect().top +
+                window.scrollY -
+                OFFSET
+
+            window.scrollTo({ top, behavior: 'smooth' })
+        }
+    }
+
     const handleScrollToTopTenPosts = () => {
         if (topTenPostsRef.current) {
             const OFFSET = 64
@@ -40,11 +61,16 @@ 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>
+                    <NavigationButton
+                        handleScroll={handleScrollToTopUsers}
+                        label="Most Active Users"
+                    />
+                    <NavigationButton
+                        handleScroll={handleScrollToTopTenPosts}
+                        label="Top 10 Posts"
+                    />
+                </div>
             </div>
         </nav>
     )