import { ButtonGroup, Page, Spacer, Tabs, useBodyScroll, useMediaQuery, } from "@geist-ui/core"; import { useCallback, useEffect, useState } from "react"; import styles from './header.module.css'; import { useRouter } from "next/router"; import useSignedIn from "../../lib/hooks/use-signed-in"; import HomeIcon from '@geist-ui/icons/home'; import MenuIcon from '@geist-ui/icons/menu'; import GitHubIcon from '@geist-ui/icons/github'; import SignOutIcon from '@geist-ui/icons/userX'; import SignInIcon from '@geist-ui/icons/user'; import SignUpIcon from '@geist-ui/icons/userPlus'; import NewIcon from '@geist-ui/icons/plusCircle'; import YourIcon from '@geist-ui/icons/list' import MoonIcon from '@geist-ui/icons/moon'; // import SettingsIcon from '@geist-ui/icons/settings'; import SunIcon from '@geist-ui/icons/sun'; import { useTheme } from "next-themes" import { Button } from "@geist-ui/core"; type Tab = { name: string icon: JSX.Element condition?: boolean value: string onClick?: () => void href?: string } const Header = () => { const router = useRouter(); const [selectedTab, setSelectedTab] = useState(router.pathname === '/' ? 'home' : router.pathname.split('/')[1]); const [expanded, setExpanded] = useState(false) const [, setBodyHidden] = useBodyScroll(null, { scrollLayer: true }) const isMobile = useMediaQuery('xs', { match: 'down' }) const { signedIn: isSignedIn, signout } = useSignedIn() const [pages, setPages] = useState([]) const { setTheme, theme } = useTheme() useEffect(() => { setBodyHidden(expanded) }, [expanded, setBodyHidden]) useEffect(() => { if (!isMobile) { setExpanded(false) } }, [isMobile]) useEffect(() => { const defaultPages: Tab[] = [ { name: isMobile ? "GitHub" : "", href: "https://github.com/maxleiter/drift", icon: , condition: true, value: "github" }, { name: isMobile ? "Change theme" : "", onClick: function () { if (typeof window !== 'undefined') setTheme(theme === 'light' ? 'dark' : 'light'); }, icon: theme === 'light' ? : , condition: true, value: "theme", } ] if (isSignedIn) setPages([ { name: 'new', icon: , value: 'new', href: '/' }, { name: 'yours', icon: , value: 'yours', href: '/mine' }, // { // name: 'settings', // icon: , // value: 'settings', // href: '/settings' // }, { name: 'sign out', icon: , value: 'signout', onClick: signout }, ...defaultPages ]) else setPages([ { name: 'home', icon: , value: 'home', href: '/' }, { name: 'Sign in', icon: , value: 'signin', href: '/signin' }, { name: 'Sign up', icon: , value: 'signup', href: '/signup' }, ...defaultPages ]) // TODO: investigate deps causing infinite loop // eslint-disable-next-line react-hooks/exhaustive-deps }, [isMobile, isSignedIn, theme]) const onTabChange = useCallback((tab: string) => { if (typeof window === 'undefined') return const match = pages.find(page => page.value === tab) if (match?.onClick) { match.onClick() } else { router.push(match?.href || '/') } }, [pages, router]) return (
{pages.map((tab) => { return {tab.icon} {tab.name}} value={tab.value} key={`${tab.value}`} /> })}
{isMobile && expanded && (
{pages.map((tab, index) => { return })}
)}
) } export default Header