Created
November 17, 2022 11:06
-
-
Save Theodore-Kelechukwu-Onyejiaku/0ed5c73c116e8fc63d263d6e2a5091b5 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { useContext } from 'react'; | |
import { useRouter } from 'next/router'; | |
import Link from 'next/link'; | |
import Cookies from 'js-cookie'; | |
import AppContext from '../utils/AppContext'; | |
export default function Header() { | |
const { | |
authUser, setAuthUser, isLoggedIn, setIsLoggedIn, | |
} = useContext(AppContext); | |
const router = useRouter(); | |
const logout = () => { | |
Cookies.remove('authToken'); | |
setIsLoggedIn(false); | |
setAuthUser(null); | |
router.push('/login'); | |
}; | |
return ( | |
<div className="border"> | |
<div className="flex fixed z-50 bg-white w-full border items-center justify-between py-5 px-5"> | |
<div> | |
<Link href="/"> | |
<span className="text-3xl"> | |
Book Ratings | |
</span> | |
</Link> | |
</div> | |
<div className="flex items-center space-x-5"> | |
{/* <Link href="/reviews"><span className="text-red-500 underline ml-5">Go to Reviews</span></Link> */} | |
{isLoggedIn ? ( | |
<> | |
<span onClick={logout} className="p-2 cursor-pointer border border-red-600">Logout</span> | |
<Link href="/create"><span className="text-red-500 underline">Create Book</span></Link> | |
<span className="p-2 w-10 h-10 block border rounded-full uppercase text-center">{authUser?.username?.split('')[0]}</span> | |
</> | |
) | |
: ( | |
<> | |
<Link href="/login"><span className="text-red-500 underline">Login</span></Link> | |
<Link href="/login"><span className="text-red-500 underline">Create Book</span></Link> | |
</> | |
)} | |
</div> | |
</div> | |
</div> | |
); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment