"use client" import styles from "./header.module.css" // import useUserData from "@lib/hooks/use-user-data" import Link from "@components/link" import { usePathname } from "next/navigation" import { signOut } from "next-auth/react" import Button from "@components/button" import clsx from "clsx" import { useTheme } from "@wits/next-themes" import { GitHub, Home, Menu, Moon, PlusCircle, Settings, Sun, User, UserPlus, UserX } from "react-feather" import * as DropdownMenu from "@radix-ui/react-dropdown-menu" import buttonStyles from "@components/button/button.module.css" import ButtonGroup from "@components/button-group" import { useEffect, useMemo, useState } from "react" import Skeleton from "@components/skeleton" type Tab = { name: string icon: JSX.Element value: string onClick?: () => void href?: string } const Header = ({ signedIn = false, isAdmin = false }) => { const pathname = usePathname() // wait to mount before rendering const [isHydrated, setHydrated] = useState(false) const { setTheme, resolvedTheme } = useTheme() useEffect(() => { setHydrated(true) }, []) const getButton = (tab: Tab) => { const isActive = pathname === tab.href const activeStyle = isActive ? styles.active : "" if (tab.onClick) { return ( ) } else if (tab.href) { return ( ) } } const pages = useMemo(() => { const defaultPages: Tab[] = [ { name: "GitHub", href: "https://github.com/maxleiter/drift", icon: , value: "github" } ] if (isAdmin) { defaultPages.push({ name: "Admin", icon: , value: "admin", href: "/admin" }) } defaultPages.push({ name: "Theme", onClick: function () { setTheme(resolvedTheme === "light" ? "dark" : "light") }, icon: isHydrated ? (resolvedTheme === "light" ? : ) : <>, value: "theme" }) if (signedIn) return [ { name: "New", icon: , value: "new", href: "/new" }, { name: "Yours", icon: , value: "yours", href: "/mine" }, { name: "Settings", icon: , value: "settings", href: "/settings" }, { name: "Sign Out", icon: , value: "signout", onClick: () => signOut({ callbackUrl: "/" }) }, ...defaultPages ] else return [ { name: "Home", icon: , value: "home", href: "/" }, { name: "Sign in", icon: , value: "signin", href: "/signin" }, { name: "Sign up", icon: , value: "signup", href: "/signup" }, ...defaultPages ] }, [isAdmin, isHydrated, resolvedTheme, signedIn, setTheme]) // // TODO: this should not be necessary. // if (!clientHydrated) { // return ( //
//
{getPages(true).map(getButton)}
//
// ) // } const buttons = pages.map(getButton) return (
{buttons}
{buttons.map((button) => ( {button} ))}
) } export default Header