71 lines
1.8 KiB
TypeScript
71 lines
1.8 KiB
TypeScript
import { UserIcon } from "@heroicons/react/24/outline"
|
|
import { FC, useState } from "react"
|
|
|
|
import Button from "../common/Button"
|
|
import Logo from "../common/Logo"
|
|
import LoginModal, { LoginModelProps } from "../login/LoginModal"
|
|
|
|
const NavBar: FC = () => {
|
|
const [modalProps, setModalProps] = useState<LoginModelProps>({
|
|
isOpen: false,
|
|
defaultPage: 0,
|
|
})
|
|
|
|
const showLoginTab = () =>
|
|
setModalProps({
|
|
defaultPage: 0,
|
|
isOpen: true,
|
|
})
|
|
|
|
const showSignupTab = () =>
|
|
setModalProps({
|
|
defaultPage: 1,
|
|
isOpen: true,
|
|
})
|
|
|
|
return (
|
|
<nav className="bg-zinc-800 w-screen font-semibold border-b border-b-black">
|
|
<div className="flex flex-row justify-between items-center h-12 mx-2">
|
|
<div>
|
|
<ul className="flex flex-row space-x-8 items-center">
|
|
<li>
|
|
<Logo className="w-8 h-8" />
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<ul className="justify-end flex flex-row space-x-3 items-center">
|
|
<li>
|
|
<Button
|
|
className="text-sm px-3 py-2 bg-neutral-700"
|
|
onClick={showLoginTab}
|
|
>
|
|
Log In
|
|
</Button>
|
|
</li>
|
|
<li>
|
|
<Button
|
|
className="text-sm px-3 py-2 bg-violet-500"
|
|
onClick={showSignupTab}
|
|
>
|
|
Sign Up
|
|
</Button>
|
|
</li>
|
|
<li>
|
|
<Button variant="subtle" className="p-[0.4rem]">
|
|
<UserIcon className="h-5 w-5 inline-block" />
|
|
</Button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<LoginModal
|
|
{...modalProps}
|
|
onClose={() => setModalProps((old) => ({ ...old, isOpen: false }))}
|
|
/>
|
|
</nav>
|
|
)
|
|
}
|
|
|
|
export default NavBar
|