Amio
6 years ago
3 changed files with 118 additions and 12 deletions
@ -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'> |
|||
<BadgeExamples data={staticExamples} /> |
|||
</div> |
|||
<style jsx>{` |
|||
.content { |
|||
padding: 3rem 0; |
|||
} |
|||
`}</style>
|
|||
</div> |
|||
<GalleryLayout tab='static'> |
|||
<BadgeExamples data={staticExamples} /> |
|||
</GalleryLayout> |
|||
) |
|||
} |
|||
} |
|||
|
Loading…
Reference in new issue