71 lines
1.4 KiB
TypeScript
71 lines
1.4 KiB
TypeScript
import { THEME } from '~/assets/global'
|
|
import Link from 'next/link'
|
|
import { ReactNode } from 'react'
|
|
|
|
const Layout = ({ children }: { children: ReactNode }) => {
|
|
return (
|
|
<main>
|
|
<header>
|
|
<h1>{THEME.title}</h1>
|
|
|
|
<nav>
|
|
<ul>
|
|
<li>
|
|
<Link href="/">
|
|
<a>Home</a>
|
|
</Link>
|
|
</li>
|
|
|
|
{(THEME.nav || []).map((n) =>
|
|
n.to ? (
|
|
<Link href={n.to} key={n.name}>
|
|
<a>{n.name}</a>
|
|
</Link>
|
|
) : (
|
|
<a
|
|
href={n.href}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
key={n.name}
|
|
>
|
|
{n.name}
|
|
</a>
|
|
)
|
|
)}
|
|
</ul>
|
|
|
|
<form>
|
|
<input name="q" type="search" placeholder="Search..." />
|
|
<div className="icon">🔎</div>
|
|
</form>
|
|
</nav>
|
|
</header>
|
|
{children}
|
|
|
|
<style jsx>{`
|
|
nav ul {
|
|
display: inline-block;
|
|
}
|
|
|
|
form {
|
|
float: right;
|
|
max-width: 300px;
|
|
position: relative;
|
|
}
|
|
|
|
form .icon {
|
|
position: absolute;
|
|
right: 5px;
|
|
top: 5px;
|
|
}
|
|
|
|
input {
|
|
padding-right: 1.5em;
|
|
}
|
|
`}</style>
|
|
</main>
|
|
)
|
|
}
|
|
|
|
export default Layout
|