55 lines
1.8 KiB
JavaScript
55 lines
1.8 KiB
JavaScript
import siteMetadata from '@/data/siteMetadata'
|
|
import headerNavLinks from '@/data/headerNavLinks'
|
|
import Logo from '@/data/logo.svg'
|
|
import Link from './Link'
|
|
import SectionContainer from './SectionContainer'
|
|
import Footer from './Footer'
|
|
import MobileNav from './MobileNav'
|
|
import ThemeSwitch from './ThemeSwitch'
|
|
|
|
const LayoutWrapper = ({ children }) => {
|
|
return (
|
|
<SectionContainer>
|
|
<div className="flex flex-col h-screen justify-between">
|
|
<header className="flex justify-between items-center py-10">
|
|
<div>
|
|
<Link href="/" aria-label="Tailwind CSS Blog">
|
|
<div className="flex justify-between items-center">
|
|
<div className="mr-3">
|
|
<Logo />
|
|
</div>
|
|
{typeof siteMetadata.headerTitle === 'string' ? (
|
|
<div className="hidden sm:block h-6 text-2xl font-semibold">
|
|
{siteMetadata.headerTitle}
|
|
</div>
|
|
) : (
|
|
siteMetadata.headerTitle
|
|
)}
|
|
</div>
|
|
</Link>
|
|
</div>
|
|
<div className="flex items-center text-base leading-5">
|
|
<div className="hidden sm:block">
|
|
{headerNavLinks.map((link) => (
|
|
<Link
|
|
key={link.title}
|
|
href={link.href}
|
|
className="p-1 sm:p-4 font-medium text-gray-900 dark:text-gray-100"
|
|
>
|
|
{link.title}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
<ThemeSwitch />
|
|
<MobileNav />
|
|
</div>
|
|
</header>
|
|
<main className="mb-auto">{children}</main>
|
|
<Footer />
|
|
</div>
|
|
</SectionContainer>
|
|
)
|
|
}
|
|
|
|
export default LayoutWrapper
|