Skip to content

Commit

Permalink
feat: migrate Header to tailwindcss, fix beta blurb, fix responsive d…
Browse files Browse the repository at this point in the history 
…esign of landing page profile statistics
  • Loading branch information
@kevinjosethomas
kevinjosethomas committed Oct 29, 2024
1 parent da8c0c2 commit 41fbc9e
Show file tree
Hide file tree
Showing 5 changed files with 354 additions and 116 deletions.
326 changes: 212 additions & 114 deletions src/components/Header/Header.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,17 @@
/* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable jsx-a11y/click-events-have-key-events */
import Link from 'next/link'
import Image from 'next/image'
import classNames from 'classnames'
import { useRouter } from 'next/router'
import { MenuIcon, UserIcon, DiscordIcon } from 'src/components/Icons/icons'
import { useCallback, useContext, useEffect, useState } from 'react'

import styles from './Header.module.scss'
import { ThemeButton } from '../ThemeButton'
import { AuthContext, ModalContext } from 'src/contexts'
import { AuthContext, ModalContext, WindowSizeContext } from 'src/contexts'

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

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

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

const userInfo = user?.lichessId ? (
<div className={styles.auth}>
<div className={styles.user}>
{UserIcon}
<div className={styles.content}>
{user?.displayName}
<p>View Info</p>
</div>
<div className="group relative flex w-full items-center gap-3 rounded bg-background-1 px-3 py-2 md:w-auto">
<i className="h-6 w-6">{UserIcon}</i>
<div className="flex flex-col">
<p className="text-sm">{user?.displayName}</p>
<p className="text-xs text-secondary">View Info</p>
</div>
<div className={styles.dropdown}>
<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%]">
<Link
href="/profile"
className={
router.pathname.startsWith('/profile') ? styles.selected : ''
}
className="flex w-full items-center justify-start px-3 py-2 hover:bg-background-3"
>
Profile
</Link>
<button onClick={logout}>Logout</button>
<button
onClick={logout}
className="flex w-full items-center justify-start px-3 py-2 hover:bg-background-3"
>
Logout
</button>
</div>
</div>
) : (
<div className={styles.auth}>
<button onClick={connectLichess}>Sign in</button>
</div>
<button onClick={connectLichess}>Sign in</button>
)

const headerContent = (
<>
<Link href="/" passHref>
<div className="flex flex-row items-center gap-2">
<Image src="/maia.png" width={40} height={40} alt="Maia Logo" />
<h2 className="text-2xl font-bold">Maia Chess</h2>
</div>
</Link>
<div className={styles.links}>
{user?.lichessId ? (
<div
className={
router.pathname.startsWith('/play') ? styles.selected : ''
}
>
<button>Play</button>
<div className={styles.dropdownContent}>
<button onClick={() => startGame('againstMaia')}>
Play Maia
</button>
<a
href="https://lichess.org/@/maia1"
target="_blank"
rel="noreferrer"
>
Play Maia on Lichess
</a>
<button onClick={() => startGame('handAndBrain')}>
Play Hand and Brain
</button>
</div>
const desktopLayout = (
<div className="flex w-[90%] flex-row items-center justify-between">
<div className="flex flex-row items-center justify-start gap-6">
<Link href="/" passHref>
<div className="flex flex-row items-center gap-2">
<Image src="/maia.png" width={40} height={40} alt="Maia Logo" />
<h2 className="text-2xl font-bold">Maia Chess</h2>
</div>
) : (
</Link>
<div className="hidden flex-row gap-1 *:px-2 *:py-1 md:flex">
{user?.lichessId ? (
<div
className={`${router.pathname.startsWith('/play') && 'bg-background-1'} group relative`}
>
<button>PLAY</button>
<div className="absolute left-0 top-[100%] z-30 hidden w-48 flex-col items-start bg-background-1 group-hover:flex">
<button
onClick={() => startGame('againstMaia')}
className="flex w-full items-center justify-start px-3 py-2 hover:bg-background-2"
>
Play Maia
</button>
<a
className="flex w-full items-center justify-start px-3 py-2 hover:bg-background-2"
href="https://lichess.org/@/maia1"
target="_blank"
rel="noreferrer"
>
Play Maia on Lichess
</a>
<button
onClick={() => startGame('handAndBrain')}
className="flex w-full items-center justify-start px-3 py-2 hover:bg-background-2"
>
Play Hand and Brain
</button>
</div>
</div>
) : (
<a
target="_blank"
rel="noreferrer"
href="https://lichess.org/@/maia1"
>
Play
</a>
)}
<Link
href="/analysis"
className={`${router.pathname.startsWith('/analysis') && 'bg-background-1'} uppercase hover:bg-background-1`}
>
Analysis
</Link>
<Link
href="/train"
className={`${router.pathname.startsWith('/train') && 'bg-background-1'} uppercase hover:bg-background-1`}
>
Train
</Link>
<Link
href="/turing"
className={`${router.pathname.startsWith('/turing') && 'bg-background-1'} uppercase hover:bg-background-1`}
>
Bot-or-not
</Link>
<Link
href="/leaderboard"
className={`${router.pathname.startsWith('/leaderboard') && 'bg-background-1'} uppercase hover:bg-background-1`}
>
Leaderboard
</Link>
<Link
href="/blog"
className={`${router.pathname.startsWith('/blog') && 'bg-background-1'} uppercase hover:bg-background-1`}
>
Blog
</Link>
<a
target="_blank"
rel="noreferrer"
href="https://lichess.org/@/maia1"
href="https://twitch.tv/maiachess"
className="uppercase hover:bg-background-1"
>
Play
WATCH
</a>
)}
<Link
href="/analysis"
className={
router.pathname.startsWith('/analysis') ? styles.selected : ''
}
>
Analysis
</Link>
<Link
href="/train"
className={
router.pathname.startsWith('/train') ? styles.selected : ''
}
>
Train
</Link>
<Link
href="/turing"
className={
router.pathname.startsWith('/turing') ? styles.selected : ''
}
>
Bot-or-not
</Link>
<Link
href="/leaderboard"
className={
router.pathname.startsWith('/leaderboard') ? styles.selected : ''
}
>
Leaderboard
</Link>
<Link
href="/blog"
className={router.pathname.startsWith('/blog') ? styles.selected : ''}
>
Blog
</Link>
<a target="_blank" rel="noreferrer" href="https://twitch.tv/maiachess">
WATCH
</a>
<a
target="_blank"
rel="noreferrer"
href="https://forms.gle/XYeoTJF4YgUu4Vq28"
>
FEEDBACK
</a>
<a
target="_blank"
rel="noreferrer"
href="https://forms.gle/XYeoTJF4YgUu4Vq28"
className="uppercase hover:bg-background-1"
>
FEEDBACK
</a>
</div>
</div>
<div className={styles.linksRight}>
<div className="hidden flex-row items-center gap-3 md:flex">
<ThemeButton />
<a
target="_blank"
Expand All @@ -176,27 +181,120 @@ export const Header: React.FC = () => {
</a>
{userInfo}
</div>
</div>
)

const mobileLayout = (
<div className="flex w-full flex-row justify-between px-4">
<Link href="/" passHref>
<div className="flex flex-row items-center gap-2">
<Image src="/maia.png" width={40} height={40} alt="Maia Logo" />
<h2 className="text-2xl font-bold">Maia Chess</h2>
</div>
</Link>
<button
className={styles.button}
className="block cursor-pointer *:*:fill-primary md:hidden"
onClick={() => setShowMenu((show) => !show)}
>
{MenuIcon}
</button>
</>
{showMenu && (
<div className="fixed left-0 top-0 z-50 flex h-screen w-screen flex-col items-start justify-between bg-backdrop py-4">
<div className="flex w-full flex-row justify-between px-4">
<Link href="/" passHref>
<div className="flex flex-row items-center gap-2">
<Image src="/maia.png" width={40} height={40} alt="Maia Logo" />
<h2 className="text-2xl font-bold">Maia Chess</h2>
</div>
</Link>
<button
className="block cursor-pointer *:*:fill-primary md:hidden"
onClick={() => setShowMenu(false)}
>
{MenuIcon}
</button>
</div>
<div className="flex flex-col gap-6 px-12">
{user?.lichessId ? (
<div className="flex flex-col items-start justify-center gap-6">
<button>PLAY</button>
<div className="flex flex-col items-start justify-center gap-4">
<button onClick={() => startGame('againstMaia')}>
Play Maia
</button>
<a
href="https://lichess.org/@/maia1"
target="_blank"
rel="noreferrer"
>
Play Maia on Lichess
</a>
<button onClick={() => startGame('handAndBrain')}>
Play Hand and Brain
</button>
</div>
</div>
) : (
<a
target="_blank"
rel="noreferrer"
href="https://lichess.org/@/maia1"
>
Play
</a>
)}
<Link href="/analysis" className="uppercase">
Analysis
</Link>
<Link href="/train" className="uppercase">
Train
</Link>
<Link href="/turing" className="uppercase">
Bot-or-not
</Link>
<Link href="/leaderboard" className="uppercase">
Leaderboard
</Link>
<Link href="/blog" className="uppercase">
Blog
</Link>
<a
target="_blank"
rel="noreferrer"
href="https://twitch.tv/maiachess"
className="uppercase"
>
Watch
</a>
<a
target="_blank"
rel="noreferrer"
href="https://forms.gle/XYeoTJF4YgUu4Vq28"
className="uppercase"
>
Feedback
</a>
</div>
<div className="flex w-full flex-row items-center gap-3 px-4">
<ThemeButton />
<a
target="_blank"
rel="noreferrer"
href="https://discord.gg/Az93GqEAs7"
>
<div className="h-6 w-6">{DiscordIcon}</div>
</a>
{userInfo}
</div>
</div>
)}
</div>
)

return (
<>
<div className={styles.header}>{headerContent}</div>
{/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
<div
className={classNames(styles.menu, { [styles.active]: showMenu })}
onClick={() => setShowMenu(false)}
>
{/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
<div className={styles.mobile} onClick={(e) => e.stopPropagation()}>
{headerContent}
</div>
<div className="flex w-screen flex-row items-center justify-center pt-4">
{isMobile ? mobileLayout : desktopLayout}
</div>
</>
)
Expand Down
Loading

0 comments on commit 41fbc9e

Please sign in to comment.