kopia lustrzana https://github.com/badgen/badgen.net
53 wiersze
1.2 KiB
TypeScript
53 wiersze
1.2 KiB
TypeScript
import Link from 'next/link'
|
|
|
|
export default function GalleryHeader ({ current }) {
|
|
return (
|
|
<header>
|
|
<h1>Badgen Gallery</h1>
|
|
<div className={`tab ${current}`}>
|
|
<Link href='/gallery/live'>
|
|
<a className='live'>Live Badges</a>
|
|
</Link>
|
|
<Link href='/gallery/static'>
|
|
<a className='static'>Static Badges</a>
|
|
</Link>
|
|
</div>
|
|
<style>{`
|
|
header {
|
|
background-color: #F7F7F7;
|
|
text-align: center;
|
|
padding: 5rem 0;
|
|
}
|
|
h1 {
|
|
font: 3rem/5rem Merriweather, serif;
|
|
letter-spacing: 1px;
|
|
font-weight: 700;
|
|
color: #333;
|
|
margin: 0;
|
|
}
|
|
.tab {
|
|
display: inline-block;
|
|
border: 1px solid #333;
|
|
margin-top: 1rem;
|
|
}
|
|
.tab a {
|
|
display: inline-block;
|
|
padding: 0 8px;
|
|
color: #333;
|
|
font: 14px/26px sans-serif;
|
|
text-transform: uppercase;
|
|
}
|
|
.tab a:hover {
|
|
cursor: pointer;
|
|
}
|
|
.live a.live,
|
|
.static a.static {
|
|
color: #EEE;
|
|
background-color: #333;
|
|
}
|
|
`}
|
|
</style>
|
|
</header>
|
|
)
|
|
}
|