manifold/web/components/header.tsx

111 lines
3.1 KiB
TypeScript
Raw Normal View History

2021-12-11 00:19:35 +00:00
import { useEffect, useState } from 'react'
2021-12-10 22:56:26 +00:00
import clsx from 'clsx'
2021-12-11 00:19:35 +00:00
import Image from 'next/image'
import Link from 'next/link'
2021-12-11 00:19:35 +00:00
import { Popover } from '@headlessui/react'
2021-12-09 23:37:26 +00:00
import { useUser } from '../hooks/use-user'
import { firebaseLogin } from '../lib/firebase/users'
const navigation = [
{
name: 'About',
2021-12-12 23:41:17 +00:00
href: 'https://mantic.notion.site/About-Mantic-Markets-7c44bc161356474cad54cba2d2973fe2',
},
2021-12-11 00:19:35 +00:00
// { name: 'Simulator', href: '/simulator' },
]
2021-12-10 22:56:26 +00:00
function SignInLink(props: { darkBackground?: boolean }) {
const { darkBackground } = props
2021-12-09 23:37:26 +00:00
const user = useUser()
2021-12-10 22:56:26 +00:00
const themeClasses = darkBackground
? 'text-white hover:text-gray-300'
: 'hover:text-gray-500'
2021-12-11 00:19:35 +00:00
const [showLogin, setShowLogin] = useState(false)
useEffect(() => {
setShowLogin(location.search.includes('demo'))
}, [])
return (
<>
2021-12-11 00:40:23 +00:00
{user ? (
<>
<Link href="/contract">
<a className={clsx('text-base font-medium', themeClasses)}>Create a market</a>
2021-12-11 00:40:23 +00:00
</Link>
2021-12-11 00:19:35 +00:00
2021-12-11 00:40:23 +00:00
<Link href="/account">
<a className={clsx('text-base font-medium', themeClasses)}>{user.name}</a>
2021-12-11 00:40:23 +00:00
</Link>
</>
) : showLogin ? (
<button
className={clsx('text-base font-medium', themeClasses)}
2021-12-11 00:40:23 +00:00
onClick={() => firebaseLogin()}
>
Sign In
</button>
) : (
<></>
)}
</>
)
}
2021-12-10 22:56:26 +00:00
export function Header(props: { darkBackground?: boolean }) {
const { darkBackground } = props
return (
<Popover as="header" className="relative">
<div className="pt-6">
<nav
className="relative max-w-7xl mx-auto flex items-center justify-between px-4 sm:px-6 bg-dark-50"
aria-label="Global"
>
<div className="flex items-center flex-1">
<div className="flex items-center justify-between w-full md:w-auto">
<Link href="/">
2021-12-10 22:56:26 +00:00
<a className="flex flex-row items-center align-items-center h-6 sm:h-10">
2021-12-11 00:16:58 +00:00
<div className="inline-block mr-3">
2021-12-13 05:42:45 +00:00
<img className="h-6 sm:h-10 w-6 sm:w-10" src="/logo-icon.svg" />
2021-12-10 22:56:26 +00:00
</div>
<span
className={clsx(
'font-major-mono lowercase sm:text-2xl my-auto',
darkBackground && 'text-white'
)}
>
Mantic Markets
</span>
</a>
</Link>
</div>
<div className="space-x-8 md:flex md:ml-16 mr-8">
{navigation.map((item) => (
<Link key={item.name} href={item.href}>
2021-12-10 22:56:26 +00:00
<a
className={clsx(
'text-base font-medium',
darkBackground
? 'text-white hover:text-gray-300'
: 'hover:text-gray-500'
)}
>
{item.name}
</a>
</Link>
))}
2021-12-11 00:19:35 +00:00
2021-12-10 22:56:26 +00:00
<SignInLink darkBackground={darkBackground} />
</div>
</div>
</nav>
</div>
</Popover>
)
}