import clsx from 'clsx' import Link from 'next/link' import Image from 'next/image' import { useUser } from '../hooks/use-user' import { formatMoney } from '../lib/util/format' import { Row } from './layout/row' import { firebaseLogin, User } from '../lib/firebase/users' import { MenuButton } from './menu' const hoverClasses = 'hover:underline hover:decoration-indigo-400 hover:decoration-2' const mobileNavigation = [ { name: 'Home', href: '/', }, { name: 'Account', href: '/account', }, { name: 'Your bets', href: '/bets', }, { name: 'Create a market', href: '/create', }, ] function ProfileSummary(props: { user: User }) { const { user } = props return (
{user.name}
{formatMoney(user.balance)}
) } function SignedInHeaders(props: { user: User; themeClasses?: string }) { const { user, themeClasses } = props return ( <> } /> ) } function SignedOutHeaders(props: { themeClasses?: string }) { const { themeClasses } = props return ( <>
Sign in
) } export function Header(props: { darkBackground?: boolean; children?: any }) { const { darkBackground, children } = props const user = useUser() const themeClasses = clsx(darkBackground && 'text-white', hoverClasses) return ( ) }