61 lines
1.8 KiB
JavaScript
61 lines
1.8 KiB
JavaScript
import { Link, routes } from '@redwoodjs/router'
|
|
import { useAuth } from '@redwoodjs/auth'
|
|
|
|
const BlogLayout = ({ children }) => {
|
|
const { logIn, logOut, isAuthenticated, currentUser } = useAuth()
|
|
|
|
return (
|
|
<>
|
|
<header className="flex justify-between items-center py-4 px-8 bg-blue-700 text-white">
|
|
<h1 className="text-5xl font-semibold tracking-tight">
|
|
<Link
|
|
className="text-blue-400 hover:text-blue-100 transition duration-100"
|
|
to={routes.home()}
|
|
>
|
|
Redwood Blog
|
|
</Link>
|
|
</h1>
|
|
<nav>
|
|
<ul className="relative flex items-center font-light">
|
|
<li>
|
|
<Link
|
|
className="py-2 px-4 hover:bg-blue-600 transition duration-100 rounded"
|
|
to={routes.about()}
|
|
>
|
|
About
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link
|
|
className="py-2 px-4 hover:bg-blue-600 transition duration-100 rounded"
|
|
to={routes.contact()}
|
|
>
|
|
Contact
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<a
|
|
className="py-2 px-4 hover:bg-blue-600 transition duration-100 rounded"
|
|
href="#"
|
|
onClick={isAuthenticated ? logOut : logIn}
|
|
>
|
|
{isAuthenticated ? 'Log Out' : 'Log In'}
|
|
</a>
|
|
</li>
|
|
{isAuthenticated && (
|
|
<li className="absolute top-0 right-0 -mt-8 px-4 text-xs text-blue-300">
|
|
{currentUser.email}
|
|
</li>
|
|
)}
|
|
</ul>
|
|
</nav>
|
|
</header>
|
|
<main className="max-w-4xl mx-auto p-12 bg-white shadow rounded-b">
|
|
{children}
|
|
</main>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default BlogLayout
|