66 lines
2.0 KiB
TypeScript
66 lines
2.0 KiB
TypeScript
import { UserIcon } from '@heroicons/react/24/outline';
|
|
import { FC, useState } from 'react';
|
|
|
|
import Button from './Button';
|
|
import Input from './Input';
|
|
import LoginModal from './LoginModal';
|
|
|
|
const NavBar: FC = () => {
|
|
const [showLogin, setShowLogin] = useState(false);
|
|
const [showTab, setShowTab] = useState(0);
|
|
|
|
const showLoginTab = () => {
|
|
setShowTab(0);
|
|
setShowLogin(true);
|
|
};
|
|
|
|
const showSignupTab = () => {
|
|
setShowTab(1);
|
|
setShowLogin(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 mx-2">
|
|
<div className="basis-1/4">
|
|
<ul className="flex flex-row space-x-8 items-center">
|
|
<li>
|
|
<img src="./assets/images/logo.png" className="w-8 h-8" alt="logo" />
|
|
</li>
|
|
<li>
|
|
<p className="text-lg">Browse</p>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div className="basis-2/4">
|
|
<div className="flex flex-row space-x-3 items-center justify-center">
|
|
<Input className=" w-72 my-2 p-2" placeholder="Search" />
|
|
</div>
|
|
</div>
|
|
<div className="basis-1/4">
|
|
<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-1">
|
|
<UserIcon className="h-5 w-5 inline-block" />
|
|
</Button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<LoginModal isOpen={showLogin} defaultPage={showTab} onClose={() => setShowLogin(false)} />
|
|
</nav>
|
|
);
|
|
};
|
|
|
|
export default NavBar;
|