2021-12-10 22:56:26 +00:00
|
|
|
import clsx from 'clsx'
|
2021-12-08 16:30:29 +00:00
|
|
|
import Link from 'next/link'
|
2021-12-17 23:40:17 +00:00
|
|
|
import Image from 'next/Image'
|
2021-12-11 00:19:35 +00:00
|
|
|
|
2021-12-09 23:37:26 +00:00
|
|
|
import { useUser } from '../hooks/use-user'
|
2021-12-17 23:40:17 +00:00
|
|
|
import { formatMoney } from '../lib/util/format'
|
|
|
|
import { Row } from './layout/row'
|
|
|
|
import { User } from '../lib/firebase/users'
|
2021-12-08 16:30:29 +00:00
|
|
|
|
2021-12-16 09:53:19 +00:00
|
|
|
const hoverClasses =
|
|
|
|
'hover:underline hover:decoration-indigo-400 hover:decoration-2'
|
|
|
|
|
2021-12-17 23:40:17 +00:00
|
|
|
function SignedInHeaders(props: { user: User; themeClasses?: string }) {
|
|
|
|
const { user, themeClasses } = props
|
2021-12-10 22:56:26 +00:00
|
|
|
|
2021-12-17 23:40:17 +00:00
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<Link href="/create">
|
|
|
|
<a className={clsx('text-base font-medium', themeClasses)}>
|
|
|
|
Create a market
|
|
|
|
</a>
|
|
|
|
</Link>
|
2021-12-09 01:57:59 +00:00
|
|
|
|
2021-12-17 23:40:17 +00:00
|
|
|
<Link href="/bets">
|
|
|
|
<a className={clsx('text-base font-medium', themeClasses)}>Your bets</a>
|
|
|
|
</Link>
|
|
|
|
|
|
|
|
<Link href="/account">
|
|
|
|
<a className={clsx('text-base font-medium', themeClasses)}>
|
|
|
|
<Row className="avatar items-center">
|
|
|
|
<div className="rounded-full w-10 h-10 mr-4">
|
|
|
|
<Image src={user.avatarUrl} width={40} height={40} />
|
|
|
|
</div>
|
|
|
|
<div>
|
|
|
|
{user.name}
|
|
|
|
<div className="text-gray-700 text-sm">
|
|
|
|
{formatMoney(user.balance)}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</Row>
|
|
|
|
</a>
|
|
|
|
</Link>
|
|
|
|
</>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
function SignedOutHeaders(props: { themeClasses?: string }) {
|
|
|
|
const { themeClasses } = props
|
2021-12-10 22:56:26 +00:00
|
|
|
|
2021-12-09 01:57:59 +00:00
|
|
|
return (
|
|
|
|
<>
|
2021-12-17 23:40:17 +00:00
|
|
|
<div className={clsx('text-base font-medium', themeClasses)}>Sign in</div>
|
2021-12-09 01:57:59 +00:00
|
|
|
</>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2021-12-17 07:21:40 +00:00
|
|
|
export function Header(props: { darkBackground?: boolean; children?: any }) {
|
|
|
|
const { darkBackground, children } = props
|
2021-12-10 22:56:26 +00:00
|
|
|
|
2021-12-17 23:40:17 +00:00
|
|
|
const user = useUser()
|
|
|
|
|
|
|
|
const themeClasses = clsx(darkBackground && 'text-white', hoverClasses)
|
|
|
|
|
2021-12-08 16:30:29 +00:00
|
|
|
return (
|
2021-12-17 23:40:17 +00:00
|
|
|
<nav
|
|
|
|
className="max-w-7xl w-full flex flex-row mx-auto pt-5 px-4 sm:px-6"
|
|
|
|
aria-label="Global"
|
|
|
|
>
|
|
|
|
<Link href="/">
|
|
|
|
<a className="flex flex-row gap-3">
|
|
|
|
<Image
|
|
|
|
className="h-6 w-6 sm:h-10 sm:w-10 hover:rotate-12 transition-all"
|
|
|
|
src="/logo-icon.svg"
|
|
|
|
width={40}
|
|
|
|
height={40}
|
|
|
|
/>
|
|
|
|
<div
|
|
|
|
className={clsx(
|
|
|
|
'font-major-mono lowercase mt-1 sm:text-2xl',
|
|
|
|
darkBackground && 'text-white'
|
|
|
|
)}
|
|
|
|
>
|
|
|
|
Mantic Markets
|
2021-12-17 04:12:33 +00:00
|
|
|
</div>
|
2021-12-17 23:40:17 +00:00
|
|
|
</a>
|
|
|
|
</Link>
|
2021-12-17 04:12:33 +00:00
|
|
|
|
2021-12-17 23:40:17 +00:00
|
|
|
<Row className="gap-8 mt-1 md:ml-16 mr-8">
|
|
|
|
{children}
|
2021-12-17 07:21:40 +00:00
|
|
|
|
2021-12-17 23:40:17 +00:00
|
|
|
{user ? (
|
|
|
|
<SignedInHeaders user={user} themeClasses={themeClasses} />
|
|
|
|
) : (
|
|
|
|
<SignedOutHeaders themeClasses={themeClasses} />
|
|
|
|
)}
|
|
|
|
</Row>
|
|
|
|
</nav>
|
2021-12-08 16:30:29 +00:00
|
|
|
)
|
|
|
|
}
|