kopia lustrzana https://github.com/badgen/badgen.net
web: add footer
rodzic
0dbd6bd5e4
commit
1344c5fd8b
|
@ -0,0 +1,91 @@
|
|||
import Link from 'next/link'
|
||||
|
||||
export default () => (
|
||||
<footer>
|
||||
<div className='footer-content'>
|
||||
<div>
|
||||
<h3><img src='/static/badgen-logo-w.svg' />Badgen Service</h3>
|
||||
<div className='sitemap'>
|
||||
<Link href='/gallery'><a>Gallery</a></Link>
|
||||
<em>/</em>
|
||||
<Link href='https://api.badgen.net'><a>API</a></Link>
|
||||
<em>/</em>
|
||||
<Link href='https://status.badgen.net'><a>Status</a></Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className='bottom'>
|
||||
<div>
|
||||
Built with ♥ by <a href='https://github.com/amio'>Amio</a> and awesome <a href='https://github.com/amio/badgen-service/graphs/contributors'>contributors</a>. Hosted on <a href='https://zeit.co/now'>Now Cloud</a>. License under <a href='https://github.com/amio/badgen-service/blob/master/LICENSE.md'>ISC</a>.
|
||||
</div>
|
||||
<div className='links'>
|
||||
<a href='https://github.com/amio/badgen-service'>
|
||||
<img src='https://simpleicons.now.sh/icons/github.svg?color=ffffff' />
|
||||
</a>
|
||||
<a href='https://twitter.com/badgen_service'>
|
||||
<img src='https://simpleicons.now.sh/icons/twitter.svg?color=ffffff' />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<style jsx>{`
|
||||
footer {
|
||||
background-color: #333;
|
||||
padding: 2rem 2rem;
|
||||
color: #777;
|
||||
}
|
||||
.footer-content {
|
||||
margin: 0 auto;
|
||||
}
|
||||
h3 {
|
||||
font: 22px/32px Merriweather, serif;
|
||||
color: #EEE;
|
||||
}
|
||||
h3 img {
|
||||
height: 20px;
|
||||
opacity: 0.8;
|
||||
margin-right: 8px;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
.sitemap {
|
||||
line-height: 26px;
|
||||
}
|
||||
.sitemap a {
|
||||
color: #AAA;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
a:hover {
|
||||
color: #EEE;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.sitemap em {
|
||||
color: #AAA;
|
||||
margin: 0 0.5rem;
|
||||
}
|
||||
.bottom {
|
||||
margin-top: 2rem;
|
||||
border-top: 1px solid #555;
|
||||
padding-top: 2rem;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 100px;
|
||||
}
|
||||
.bottom a {
|
||||
color: #999;
|
||||
}
|
||||
.links {
|
||||
text-align: right;
|
||||
}
|
||||
.links a {
|
||||
margin-left: 10px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
.links a:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
.links img {
|
||||
height: 20px;
|
||||
}
|
||||
`}</style>
|
||||
</footer>
|
||||
)
|
|
@ -0,0 +1,23 @@
|
|||
import React from 'react'
|
||||
import GalleryHeader from './gallery-header.js'
|
||||
import Footer from './footer.js'
|
||||
|
||||
export default class extends React.Component {
|
||||
render () {
|
||||
const { tab, children } = this.props
|
||||
return (
|
||||
<div>
|
||||
<GalleryHeader current={tab} />
|
||||
<div className='content'>
|
||||
{children}
|
||||
</div>
|
||||
<Footer />
|
||||
<style jsx>{`
|
||||
.content {
|
||||
padding: 3rem 0;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
|
@ -1,22 +1,14 @@
|
|||
import React from 'react'
|
||||
import GalleryHeader from '../../components/gallery-header.js'
|
||||
import GalleryLayout from '../../components/gallery-layout.js'
|
||||
import BadgeExamples from '../../components/badge-examples.js'
|
||||
import staticExamples from '../../libs/examples-static.js'
|
||||
|
||||
export default class Gallery extends React.Component {
|
||||
render () {
|
||||
return (
|
||||
<div className='wrapper'>
|
||||
<GalleryHeader current='static' />
|
||||
<div className='content'>
|
||||
<GalleryLayout tab='static'>
|
||||
<BadgeExamples data={staticExamples} />
|
||||
</div>
|
||||
<style jsx>{`
|
||||
.content {
|
||||
padding: 3rem 0;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
</GalleryLayout>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
Ładowanie…
Reference in New Issue