scroll to top ten posts

Author: StackOverflowIsBetterThanAnyAI

src/app/page.tsx

@@ -1,22 +1,28 @@
 'use client'
 
+import { useRef } from 'react'
 import Feed from '@/components/feed/Feed'
 import Footer from '@/components/footer/Footer'
 import Hero from '@/components/hero/Hero'
 import Navigation from '@/components/navigation/Navigation'
+import { ContextTopTenPosts } from '@/context/ContextTopTenPosts'
 import { useFocusTrap } from '@/hooks/useFocusTrap'
 import { useSetWindowScrollY } from '@/hooks/useSetWindowScrollY'
 
 export default function Home() {
+    const topTenPostsRef = useRef<HTMLDivElement | null>(null)
+
     useFocusTrap()
     useSetWindowScrollY()
 
     return (
         <div className="min-h-svh flex flex-col items-center justify-start bg-gradient-to-b from-stone-700 to-stone-800">
-            <Navigation />
-            <Hero />
-            <Feed />
-            <Footer />
+            <ContextTopTenPosts.Provider value={topTenPostsRef}>
+                <Navigation />
+                <Hero />
+                <Feed />
+                <Footer />
+            </ContextTopTenPosts.Provider>
         </div>
     )
 }

src/components/feed/Feed.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { useCallback, useContext, useEffect, useRef, useState } from 'react'
 import { FetchLoading } from 'fetch-loading'
 import { Badge } from '@/components/ui/badge'
 import {
@@ -20,11 +20,20 @@ import {
 } from '@/components/ui/carousel'
 import { Skeleton } from '@/components/ui/skeleton'
 import fetchFeedItems from '@/api/fetchFeedItems'
+import { ContextTopTenPosts } from '@/context/ContextTopTenPosts'
 import { FeedItemsType } from '@/types/types'
 import { getItemFromSessionStorage } from '@/utils/getItemFromSessionStorage'
 import { getWindowScrollY } from '@/utils/getWindowScrollY'
 
 const Feed = () => {
+    const contextTopTenPosts = useContext(ContextTopTenPosts)
+    if (!contextTopTenPosts) {
+        throw new Error(
+            'Feed must be used within a ContextTopTenPosts.Provider'
+        )
+    }
+    const topTenPostsRef = contextTopTenPosts
+
     const PAGE_SIZE = 10
     const nextPage = useRef<number>(1)
     const [feedItems, setFeedItems] = useState<Array<FeedItemsType>>([])
@@ -69,6 +78,7 @@ const Feed = () => {
         <main
             className="w-full flex flex-col items-center gap-8 lg:gap-12 max-w-7xl relative isolate bg-stone-300 text-stone-950 lg:rounded-lg p-3 sm:p-4 lg:p-6
             drop-shadow-stone-900 drop-shadow-sm"
+            ref={topTenPostsRef}
         >
             <div className="w-full flex flex-col items-center px-14 sm:px-16 py-6 bg-stone-400/60 rounded-lg shadow-md shadow-stone-500">
                 <div className="w-full flex flex-col gap-4 max-w-3xl">

src/components/hero/Hero.tsx

@@ -1,9 +1,31 @@
+import { useContext } from 'react'
+import Image from 'next/image'
 import Link from 'next/link'
 import { Button } from '@/components/ui/button'
+import { ContextTopTenPosts } from '@/context/ContextTopTenPosts'
 import heroLogo from '@/assets/hero_logo.webp'
-import Image from 'next/image'
 
 const Hero = () => {
+    const contextTopTenPosts = useContext(ContextTopTenPosts)
+    if (!contextTopTenPosts) {
+        throw new Error(
+            'Feed must be used within a ContextTopTenPosts.Provider'
+        )
+    }
+    const topTenPostsRef = contextTopTenPosts
+
+    const handleScrollToTopTenPosts = () => {
+        if (topTenPostsRef.current) {
+            const OFFSET = 64
+            const top =
+                topTenPostsRef.current.getBoundingClientRect().top +
+                window.scrollY -
+                OFFSET
+
+            window.scrollTo({ top, behavior: 'smooth' })
+        }
+    }
+
     return (
         <div className="w-full flex flex-col items-center gap-8 max-w-7xl relative isolate bg-stone-100 text-stone-950 p-3 sm:p-4 lg:p-6 my-6 lg:my-8">
             <h1 className="text-extremely-large font-mono font-semibold">
@@ -63,14 +85,14 @@ const Hero = () => {
                             variant="outline"
                             className="flex m-auto mt-4 px-8 w-fit"
                         >
-                            <Link
-                                href=""
+                            <button
                                 className="text-normal"
                                 aria-label="Link to Top 10 Posts (scrolls to section)"
                                 title="Link to Top 10 Posts"
+                                onClick={handleScrollToTopTenPosts}
                             >
                                 Top 10 Posts
-                            </Link>
+                            </button>
                         </Button>
                     </p>
                 </div>

src/context/ContextTopTenPosts.ts

@@ -0,0 +1,5 @@
+import { createContext, RefObject } from 'react'
+
+export const ContextTopTenPosts = createContext<
+    RefObject<HTMLDivElement | null> | undefined
+>(undefined)