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 SunIcon from '@geist-ui/icons/sun'; import type { ThemeProps } from "@lib/types"; import useTheme from "@lib/hooks/use-theme"; 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 } = useSignedIn() const [pages, setPages] = useState([]) const { changeTheme, theme } = useTheme() useEffect(() => { setBodyHidden(expanded) }, [expanded, setBodyHidden]) useEffect(() => { if (!isMobile) { setExpanded(false) } }, [isMobile]) useEffect(() => { const pageList: Tab[] = [ { name: "Home", href: "/", icon: , condition: !isSignedIn, value: "home" }, { name: "New", href: "/new", icon: , condition: isSignedIn, value: "new" }, { name: "Yours", href: "/mine", icon: , condition: isSignedIn, value: "mine" }, { name: "Sign out", href: "/signout", icon: , condition: isSignedIn, value: "signout" }, { name: "Sign in", href: "/signin", icon: , condition: !isSignedIn, value: "signin" }, { name: "Sign up", href: "/signup", icon: , condition: !isSignedIn, value: "signup" }, { name: isMobile ? "GitHub" : "", href: "https://github.com/maxleiter/drift", icon: , condition: true, value: "github" }, { name: isMobile ? "Change theme" : "", onClick: function () { if (typeof window !== 'undefined') { changeTheme(); } }, icon: theme === 'light' ? : , condition: true, value: "theme", } ] setPages(pageList.filter(page => page.condition)) }, [changeTheme, 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