Skip to content

Commit 41fbc9e

Browse files
kevinjosethomaskevinjosethomas
committed
feat: migrate Header to tailwindcss, fix beta blurb, fix responsive design of landing page profile statistics
1 parent da8c0c2 commit 41fbc9e

File tree

5 files changed

+354
-116
lines changed

5 files changed

+354
-116
lines changed

‎src/components/Header/Header.tsx

+212-114
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,17 @@
1+
/* eslint-disable jsx-a11y/no-static-element-interactions */
2+
/* eslint-disable jsx-a11y/click-events-have-key-events */
13
import Link from 'next/link'
24
import Image from 'next/image'
3-
import classNames from 'classnames'
45
import { useRouter } from 'next/router'
56
import { MenuIcon, UserIcon, DiscordIcon } from 'src/components/Icons/icons'
67
import { useCallback, useContext, useEffect, useState } from 'react'
78

8-
import styles from './Header.module.scss'
99
import { ThemeButton } from '../ThemeButton'
10-
import { AuthContext, ModalContext } from 'src/contexts'
10+
import { AuthContext, ModalContext, WindowSizeContext } from 'src/contexts'
1111

1212
export const Header: React.FC = () => {
1313
const [showMenu, setShowMenu] = useState(false)
14+
const { isMobile } = useContext(WindowSizeContext)
1415

1516
const { user, connectLichess, logout } = useContext(AuthContext)
1617

@@ -49,123 +50,127 @@ export const Header: React.FC = () => {
4950
}, [router])
5051

5152
const userInfo = user?.lichessId ? (
52-
<div className={styles.auth}>
53-
<div className={styles.user}>
54-
{UserIcon}
55-
<div className={styles.content}>
56-
{user?.displayName}
57-
<p>View Info</p>
58-
</div>
53+
<div className="group relative flex w-full items-center gap-3 rounded bg-background-1 px-3 py-2 md:w-auto">
54+
<i className="h-6 w-6">{UserIcon}</i>
55+
<div className="flex flex-col">
56+
<p className="text-sm">{user?.displayName}</p>
57+
<p className="text-xs text-secondary">View Info</p>
5958
</div>
60-
<div className={styles.dropdown}>
59+
<div className="absolute bottom-[100%] left-0 z-10 hidden w-full overflow-hidden rounded bg-background-2 group-hover:flex group-hover:flex-col md:bottom-auto md:top-[100%]">
6160
<Link
6261
href="/profile"
63-
className={
64-
router.pathname.startsWith('/profile') ? styles.selected : ''
65-
}
62+
className="flex w-full items-center justify-start px-3 py-2 hover:bg-background-3"
6663
>
6764
Profile
6865
</Link>
69-
<button onClick={logout}>Logout</button>
66+
<button
67+
onClick={logout}
68+
className="flex w-full items-center justify-start px-3 py-2 hover:bg-background-3"
69+
>
70+
Logout
71+
</button>
7072
</div>
7173
</div>
7274
) : (
73-
<div className={styles.auth}>
74-
<button onClick={connectLichess}>Sign in</button>
75-
</div>
75+
<button onClick={connectLichess}>Sign in</button>
7676
)
7777

78-
const headerContent = (
79-
<>
80-
<Link href="/" passHref>
81-
<div className="flex flex-row items-center gap-2">
82-
<Image src="/maia.png" width={40} height={40} alt="Maia Logo" />
83-
<h2 className="text-2xl font-bold">Maia Chess</h2>
84-
</div>
85-
</Link>
86-
<div className={styles.links}>
87-
{user?.lichessId ? (
88-
<div
89-
className={
90-
router.pathname.startsWith('/play') ? styles.selected : ''
91-
}
92-
>
93-
<button>Play</button>
94-
<div className={styles.dropdownContent}>
95-
<button onClick={() => startGame('againstMaia')}>
96-
Play Maia
97-
</button>
98-
<a
99-
href="https://lichess.org/@/maia1"
100-
target="_blank"
101-
rel="noreferrer"
102-
>
103-
Play Maia on Lichess
104-
</a>
105-
<button onClick={() => startGame('handAndBrain')}>
106-
Play Hand and Brain
107-
</button>
108-
</div>
78+
const desktopLayout = (
79+
<div className="flex w-[90%] flex-row items-center justify-between">
80+
<div className="flex flex-row items-center justify-start gap-6">
81+
<Link href="/" passHref>
82+
<div className="flex flex-row items-center gap-2">
83+
<Image src="/maia.png" width={40} height={40} alt="Maia Logo" />
84+
<h2 className="text-2xl font-bold">Maia Chess</h2>
10985
</div>
110-
) : (
86+
</Link>
87+
<div className="hidden flex-row gap-1 *:px-2 *:py-1 md:flex">
88+
{user?.lichessId ? (
89+
<div
90+
className={`${router.pathname.startsWith('/play') && 'bg-background-1'} group relative`}
91+
>
92+
<button>PLAY</button>
93+
<div className="absolute left-0 top-[100%] z-30 hidden w-48 flex-col items-start bg-background-1 group-hover:flex">
94+
<button
95+
onClick={() => startGame('againstMaia')}
96+
className="flex w-full items-center justify-start px-3 py-2 hover:bg-background-2"
97+
>
98+
Play Maia
99+
</button>
100+
<a
101+
className="flex w-full items-center justify-start px-3 py-2 hover:bg-background-2"
102+
href="https://lichess.org/@/maia1"
103+
target="_blank"
104+
rel="noreferrer"
105+
>
106+
Play Maia on Lichess
107+
</a>
108+
<button
109+
onClick={() => startGame('handAndBrain')}
110+
className="flex w-full items-center justify-start px-3 py-2 hover:bg-background-2"
111+
>
112+
Play Hand and Brain
113+
</button>
114+
</div>
115+
</div>
116+
) : (
117+
<a
118+
target="_blank"
119+
rel="noreferrer"
120+
href="https://lichess.org/@/maia1"
121+
>
122+
Play
123+
</a>
124+
)}
125+
<Link
126+
href="/analysis"
127+
className={`${router.pathname.startsWith('/analysis') && 'bg-background-1'} uppercase hover:bg-background-1`}
128+
>
129+
Analysis
130+
</Link>
131+
<Link
132+
href="/train"
133+
className={`${router.pathname.startsWith('/train') && 'bg-background-1'} uppercase hover:bg-background-1`}
134+
>
135+
Train
136+
</Link>
137+
<Link
138+
href="/turing"
139+
className={`${router.pathname.startsWith('/turing') && 'bg-background-1'} uppercase hover:bg-background-1`}
140+
>
141+
Bot-or-not
142+
</Link>
143+
<Link
144+
href="/leaderboard"
145+
className={`${router.pathname.startsWith('/leaderboard') && 'bg-background-1'} uppercase hover:bg-background-1`}
146+
>
147+
Leaderboard
148+
</Link>
149+
<Link
150+
href="/blog"
151+
className={`${router.pathname.startsWith('/blog') && 'bg-background-1'} uppercase hover:bg-background-1`}
152+
>
153+
Blog
154+
</Link>
111155
<a
112156
target="_blank"
113157
rel="noreferrer"
114-
href="https://lichess.org/@/maia1"
158+
href="https://twitch.tv/maiachess"
159+
className="uppercase hover:bg-background-1"
115160
>
116-
Play
161+
WATCH
117162
</a>
118-
)}
119-
<Link
120-
href="/analysis"
121-
className={
122-
router.pathname.startsWith('/analysis') ? styles.selected : ''
123-
}
124-
>
125-
Analysis
126-
</Link>
127-
<Link
128-
href="/train"
129-
className={
130-
router.pathname.startsWith('/train') ? styles.selected : ''
131-
}
132-
>
133-
Train
134-
</Link>
135-
<Link
136-
href="/turing"
137-
className={
138-
router.pathname.startsWith('/turing') ? styles.selected : ''
139-
}
140-
>
141-
Bot-or-not
142-
</Link>
143-
<Link
144-
href="/leaderboard"
145-
className={
146-
router.pathname.startsWith('/leaderboard') ? styles.selected : ''
147-
}
148-
>
149-
Leaderboard
150-
</Link>
151-
<Link
152-
href="/blog"
153-
className={router.pathname.startsWith('/blog') ? styles.selected : ''}
154-
>
155-
Blog
156-
</Link>
157-
<a target="_blank" rel="noreferrer" href="https://twitch.tv/maiachess">
158-
WATCH
159-
</a>
160-
<a
161-
target="_blank"
162-
rel="noreferrer"
163-
href="https://forms.gle/XYeoTJF4YgUu4Vq28"
164-
>
165-
FEEDBACK
166-
</a>
163+
<a
164+
target="_blank"
165+
rel="noreferrer"
166+
href="https://forms.gle/XYeoTJF4YgUu4Vq28"
167+
className="uppercase hover:bg-background-1"
168+
>
169+
FEEDBACK
170+
</a>
171+
</div>
167172
</div>
168-
<div className={styles.linksRight}>
173+
<div className="hidden flex-row items-center gap-3 md:flex">
169174
<ThemeButton />
170175
<a
171176
target="_blank"
@@ -176,27 +181,120 @@ export const Header: React.FC = () => {
176181
</a>
177182
{userInfo}
178183
</div>
184+
</div>
185+
)
186+
187+
const mobileLayout = (
188+
<div className="flex w-full flex-row justify-between px-4">
189+
<Link href="/" passHref>
190+
<div className="flex flex-row items-center gap-2">
191+
<Image src="/maia.png" width={40} height={40} alt="Maia Logo" />
192+
<h2 className="text-2xl font-bold">Maia Chess</h2>
193+
</div>
194+
</Link>
179195
<button
180-
className={styles.button}
196+
className="block cursor-pointer *:*:fill-primary md:hidden"
181197
onClick={() => setShowMenu((show) => !show)}
182198
>
183199
{MenuIcon}
184200
</button>
185-
</>
201+
{showMenu && (
202+
<div className="fixed left-0 top-0 z-50 flex h-screen w-screen flex-col items-start justify-between bg-backdrop py-4">
203+
<div className="flex w-full flex-row justify-between px-4">
204+
<Link href="/" passHref>
205+
<div className="flex flex-row items-center gap-2">
206+
<Image src="/maia.png" width={40} height={40} alt="Maia Logo" />
207+
<h2 className="text-2xl font-bold">Maia Chess</h2>
208+
</div>
209+
</Link>
210+
<button
211+
className="block cursor-pointer *:*:fill-primary md:hidden"
212+
onClick={() => setShowMenu(false)}
213+
>
214+
{MenuIcon}
215+
</button>
216+
</div>
217+
<div className="flex flex-col gap-6 px-12">
218+
{user?.lichessId ? (
219+
<div className="flex flex-col items-start justify-center gap-6">
220+
<button>PLAY</button>
221+
<div className="flex flex-col items-start justify-center gap-4">
222+
<button onClick={() => startGame('againstMaia')}>
223+
Play Maia
224+
</button>
225+
<a
226+
href="https://lichess.org/@/maia1"
227+
target="_blank"
228+
rel="noreferrer"
229+
>
230+
Play Maia on Lichess
231+
</a>
232+
<button onClick={() => startGame('handAndBrain')}>
233+
Play Hand and Brain
234+
</button>
235+
</div>
236+
</div>
237+
) : (
238+
<a
239+
target="_blank"
240+
rel="noreferrer"
241+
href="https://lichess.org/@/maia1"
242+
>
243+
Play
244+
</a>
245+
)}
246+
<Link href="/analysis" className="uppercase">
247+
Analysis
248+
</Link>
249+
<Link href="/train" className="uppercase">
250+
Train
251+
</Link>
252+
<Link href="/turing" className="uppercase">
253+
Bot-or-not
254+
</Link>
255+
<Link href="/leaderboard" className="uppercase">
256+
Leaderboard
257+
</Link>
258+
<Link href="/blog" className="uppercase">
259+
Blog
260+
</Link>
261+
<a
262+
target="_blank"
263+
rel="noreferrer"
264+
href="https://twitch.tv/maiachess"
265+
className="uppercase"
266+
>
267+
Watch
268+
</a>
269+
<a
270+
target="_blank"
271+
rel="noreferrer"
272+
href="https://forms.gle/XYeoTJF4YgUu4Vq28"
273+
className="uppercase"
274+
>
275+
Feedback
276+
</a>
277+
</div>
278+
<div className="flex w-full flex-row items-center gap-3 px-4">
279+
<ThemeButton />
280+
<a
281+
target="_blank"
282+
rel="noreferrer"
283+
href="https://discord.gg/Az93GqEAs7"
284+
>
285+
<div className="h-6 w-6">{DiscordIcon}</div>
286+
</a>
287+
{userInfo}
288+
</div>
289+
</div>
290+
)}
291+
</div>
186292
)
187293

188294
return (
189295
<>
190-
<div className={styles.header}>{headerContent}</div>
191-
{/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
192-
<div
193-
className={classNames(styles.menu, { [styles.active]: showMenu })}
194-
onClick={() => setShowMenu(false)}
195-
>
196-
{/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
197-
<div className={styles.mobile} onClick={(e) => e.stopPropagation()}>
198-
{headerContent}
199-
</div>
296+
<div className="flex w-screen flex-row items-center justify-center pt-4">
297+
{isMobile ? mobileLayout : desktopLayout}
200298
</div>
201299
</>
202300
)

0 commit comments

Comments
 (0)