Skip to content

Commit 2ba70c2

Browse files
StackOverflowIsBetterThanAnyAIStackOverflowIsBetterThanAnyAI
committed
context partners
1 parent 716e938 commit 2ba70c2

File tree

4 files changed

+100
-62
lines changed

4 files changed

+100
-62
lines changed

‎src/app/page.tsx‎

Lines changed: 18 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import Partners from '@/components/partners/Partners'
99
import Quote from '@/components/quote/Quote'
1010
import Users from '@/components/users/Users'
1111
import { ContextContentLoaded } from '@/context/ContextContentLoaded'
12+
import { ContextPartners } from '@/context/ContextPartners'
1213
import { ContextQuote } from '@/context/ContextQuote'
1314
import { ContextTopTenPosts } from '@/context/ContextTopTenPosts'
1415
import { ContextTopUsers } from '@/context/ContextTopUsers'
@@ -28,7 +29,8 @@ export default function Home() {
2829
users: false,
2930
})
3031

31-
const quoteRef = useRef<HTMLQuoteElement>(null)
32+
const partnersRef = useRef<HTMLDivElement | null>(null)
33+
const quoteRef = useRef<HTMLQuoteElement | null>(null)
3234
const topTenPostsRef = useRef<HTMLDivElement | null>(null)
3335
const topUsersRef = useRef<HTMLDivElement | null>(null)
3436

@@ -42,19 +44,21 @@ export default function Home() {
4244
<ContextContentLoaded.Provider
4345
value={[contentLoaded, setContentLoaded]}
4446
>
45-
<ContextQuote.Provider value={quoteRef}>
46-
<ContextTopTenPosts.Provider value={topTenPostsRef}>
47-
<ContextTopUsers.Provider value={topUsersRef}>
48-
<Navigation />
49-
<Hero />
50-
<Users />
51-
<Quote />
52-
<Partners />
53-
<Feed />
54-
<Footer />
55-
</ContextTopUsers.Provider>
56-
</ContextTopTenPosts.Provider>
57-
</ContextQuote.Provider>
47+
<ContextPartners.Provider value={partnersRef}>
48+
<ContextQuote.Provider value={quoteRef}>
49+
<ContextTopTenPosts.Provider value={topTenPostsRef}>
50+
<ContextTopUsers.Provider value={topUsersRef}>
51+
<Navigation />
52+
<Hero />
53+
<Users />
54+
<Quote />
55+
<Partners />
56+
<Feed />
57+
<Footer />
58+
</ContextTopUsers.Provider>
59+
</ContextTopTenPosts.Provider>
60+
</ContextQuote.Provider>
61+
</ContextPartners.Provider>
5862
</ContextContentLoaded.Provider>
5963
</div>
6064
)

‎src/components/navigation/Navigation.tsx‎

Lines changed: 62 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { useContext, useRef, useState } from 'react'
44
import { Button } from '@/components/ui/button'
55
import NavigationButton from './NavigationButton'
66
import NavigationLogo from './NavigationLogo'
7+
import { ContextPartners } from '@/context/ContextPartners'
78
import { ContextQuote } from '@/context/ContextQuote'
89
import { ContextTopTenPosts } from '@/context/ContextTopTenPosts'
910
import { ContextTopUsers } from '@/context/ContextTopUsers'
@@ -12,6 +13,14 @@ import { useNavigationOpacity } from '@/hooks/useNavigationOpacity'
1213
import { useScreenWidth } from '@/hooks/useScreenWidth'
1314

1415
const Navigation = () => {
16+
const contextPartners = useContext(ContextPartners)
17+
if (!contextPartners) {
18+
throw new Error(
19+
'Navigation must be used within a ContextPartners.Provider'
20+
)
21+
}
22+
const partnersRef = contextPartners
23+
1524
const contextQuote = useContext(ContextQuote)
1625
if (!contextQuote) {
1726
throw new Error(
@@ -44,25 +53,20 @@ const Navigation = () => {
4453

4554
useNavigationOpacity({ setNavOpacity, timerRef })
4655

56+
const handleScrollToPartners = () => {
57+
setWindowScrollTo(SCREEN_WIDTH === 'DESKTOP' ? 48 : 168, partnersRef)
58+
}
59+
4760
const handleScrollToQuote = () => {
48-
setWindowScrollTo(
49-
['MOBILE', 'TABLET_SMALL'].includes(SCREEN_WIDTH) ? 144 : 72,
50-
quoteRef
51-
)
61+
setWindowScrollTo(SCREEN_WIDTH === 'DESKTOP' ? 72 : 144, quoteRef)
5262
}
5363

5464
const handleScrollToTopUsers = () => {
55-
setWindowScrollTo(
56-
['MOBILE', 'TABLET_SMALL'].includes(SCREEN_WIDTH) ? 112 : 48,
57-
topUsersRef
58-
)
65+
setWindowScrollTo(SCREEN_WIDTH === 'DESKTOP' ? 48 : 144, topUsersRef)
5966
}
6067

6168
const handleScrollToTopTenPosts = () => {
62-
setWindowScrollTo(
63-
['MOBILE', 'TABLET_SMALL'].includes(SCREEN_WIDTH) ? 128 : 72,
64-
topTenPostsRef
65-
)
69+
setWindowScrollTo(SCREEN_WIDTH === 'DESKTOP' ? 72 : 168, topTenPostsRef)
6670
}
6771

6872
return (
@@ -74,7 +78,7 @@ const Navigation = () => {
7478
>
7579
<div className="max-w-7xl flex items-center justify-between m-auto h-16 px-2 py-1 md:py-2">
7680
<NavigationLogo />
77-
{['TABLET', 'DESKTOP'].includes(SCREEN_WIDTH) ? (
81+
{SCREEN_WIDTH === 'DESKTOP' ? (
7882
<div>
7983
<NavigationButton
8084
handleScroll={handleScrollToTopUsers}
@@ -86,6 +90,11 @@ const Navigation = () => {
8690
label="Quote of the Day"
8791
variant="ghost"
8892
/>
93+
<NavigationButton
94+
handleScroll={handleScrollToPartners}
95+
label="Our Partners"
96+
variant="ghost"
97+
/>
8998
<NavigationButton
9099
handleScroll={handleScrollToTopTenPosts}
91100
label="Top 10 Posts"
@@ -116,41 +125,48 @@ const Navigation = () => {
116125
)}
117126
</div>
118127
</nav>
119-
{['TABLET_SMALL', 'MOBILE'].includes(SCREEN_WIDTH) &&
120-
menuExpanded && (
121-
<nav
122-
className={`sticky top-16 z-50 w-full transition-opacity duration-1000 ease-in-out ${navOpacity}
128+
{SCREEN_WIDTH !== 'DESKTOP' && menuExpanded && (
129+
<nav
130+
className={`sticky top-16 z-50 w-full transition-opacity duration-1000 ease-in-out ${navOpacity}
123131
bg-stone-800 text-zinc-100 shadow-md shadow-stone-600/80
124132
flex flex-wrap justify-center py-2 px-4 border-t-2 border-stone-600`}
125-
id="mobile-navigation"
126-
aria-label="Navigate to each Section"
127-
>
128-
<NavigationButton
129-
handleScroll={() => {
130-
handleScrollToTopUsers()
131-
setMenuExpanded(false)
132-
}}
133-
label="Most Active Users"
134-
variant="secondary"
135-
/>
136-
<NavigationButton
137-
handleScroll={() => {
138-
handleScrollToQuote()
139-
setMenuExpanded(false)
140-
}}
141-
label="Quote of the Day"
142-
variant="secondary"
143-
/>
144-
<NavigationButton
145-
handleScroll={() => {
146-
handleScrollToTopTenPosts()
147-
setMenuExpanded(false)
148-
}}
149-
label="Top 10 Posts"
150-
variant="secondary"
151-
/>
152-
</nav>
153-
)}
133+
id="mobile-navigation"
134+
aria-label="Navigate to each Section"
135+
>
136+
<NavigationButton
137+
handleScroll={() => {
138+
handleScrollToTopUsers()
139+
setMenuExpanded(false)
140+
}}
141+
label="Most Active Users"
142+
variant="secondary"
143+
/>
144+
<NavigationButton
145+
handleScroll={() => {
146+
handleScrollToQuote()
147+
setMenuExpanded(false)
148+
}}
149+
label="Quote of the Day"
150+
variant="secondary"
151+
/>
152+
<NavigationButton
153+
handleScroll={() => {
154+
handleScrollToPartners()
155+
setMenuExpanded(false)
156+
}}
157+
label="Our Partners"
158+
variant="secondary"
159+
/>
160+
<NavigationButton
161+
handleScroll={() => {
162+
handleScrollToTopTenPosts()
163+
setMenuExpanded(false)
164+
}}
165+
label="Top 10 Posts"
166+
variant="secondary"
167+
/>
168+
</nav>
169+
)}
154170
</>
155171
)
156172
}

‎src/components/partners/Partners.tsx‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
'use client'
22

33
import Image from 'next/image'
4+
import { useState, useEffect, useContext } from 'react'
45
import { faker } from '@faker-js/faker'
6+
57
import logoipsum0 from '@/assets/logoipsum0.webp'
68
import logoipsum1 from '@/assets/logoipsum1.webp'
79
import logoipsum2 from '@/assets/logoipsum2.webp'
@@ -19,9 +21,17 @@ import logoipsum13 from '@/assets/logoipsum13.webp'
1921
import logoipsum14 from '@/assets/logoipsum14.webp'
2022
import logoipsum15 from '@/assets/logoipsum15.webp'
2123
import { SectionHeader } from '@/components/ui/sectionheader'
22-
import { useState, useEffect } from 'react'
24+
import { ContextPartners } from '@/context/ContextPartners'
2325

2426
const Partners = () => {
27+
const contextPartners = useContext(ContextPartners)
28+
if (!contextPartners) {
29+
throw new Error(
30+
'Partners must be used within a ContextPartners.Provider'
31+
)
32+
}
33+
const partnersRef = contextPartners
34+
2535
const images = [
2636
logoipsum0,
2737
logoipsum1,
@@ -51,7 +61,10 @@ const Partners = () => {
5161
}, [images.length])
5262

5363
return (
54-
<section className="w-full max-w-7xl bg-stone-100 text-stone-950 my-6 lg:my-8 overflow-hidden">
64+
<section
65+
className="w-full max-w-7xl bg-stone-100 text-stone-950 my-6 lg:my-8 overflow-hidden"
66+
ref={partnersRef}
67+
>
5568
<SectionHeader className="p-2 sm:p-3 lg:p-6">
5669
Our Partners
5770
</SectionHeader>

‎src/context/ContextPartners.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { createContext, RefObject } from 'react'
2+
3+
export const ContextPartners = createContext<
4+
RefObject<HTMLDivElement | null> | undefined
5+
>(undefined)

0 commit comments

Comments
 (0)