From 90b1144062434373baf667f0b6fb2a30274faea9 Mon Sep 17 00:00:00 2001
From: amio <amio.cn@gmail.com>
Date: Sat, 24 Aug 2019 17:08:32 +0800
Subject: [PATCH] Update topbar & footer

---
 components/footer.js   |  6 +++++-
 components/top-bar.jsx | 39 +++++++++++++++++++++++++++++++++++++++
 pages/index.js         |  2 ++
 3 files changed, 46 insertions(+), 1 deletion(-)
 create mode 100644 components/top-bar.jsx

diff --git a/components/footer.js b/components/footer.js
index cdfa0fe..acc7af8 100644
--- a/components/footer.js
+++ b/components/footer.js
@@ -15,12 +15,16 @@ export default () => (
           <Link href='https://github.com/badgen/badgen.net'><a>GitHub</a></Link>
           <em>/</em>
           <Link href='https://twitter.com/badgen_net'><a>Twitter</a></Link>
+          <em>/</em>
+          <Link href='https://opencollective.com/badgen'><a>OpenCollective</a></Link>
           <br />
         </div>
       </div>
       <div className='bottom'>
         <div>
-          Built with ♥ by <a href='https://github.com/amio'>Amio</a> and awesome <a href='https://github.com/badgen/badgen.net/graphs/contributors'>contributors</a>. Hosted on <a href='https://zeit.co/now'>Now</a>. License under <a href='https://github.com/badgen/badgen.net/blob/master/LICENSE.md'>ISC</a>.
+          Built with ♥ by <a href='https://github.com/amio'>Amio</a> and
+          awesome <a href='https://github.com/badgen/badgen.net/graphs/contributors'>contributors</a>.
+          Love Badgen? Please consider <a href="https://opencollective.com/badgen">donating</a> to sustain our service!
         </div>
         <div className='links'>
           <a href='https://twitter.com/badgen_net'>
diff --git a/components/top-bar.jsx b/components/top-bar.jsx
new file mode 100644
index 0000000..c5640e7
--- /dev/null
+++ b/components/top-bar.jsx
@@ -0,0 +1,39 @@
+const TopBar = () => {
+  return (
+    <div className="topbar">
+      <div className="navs">
+        <a href="https://badgen.net">CLASSIC STYLE</a>
+        <a href="https://flat.badgen.net">FLAT STYLE</a>
+        <a href="/builder">BADGE BUILDER</a>
+      </div>
+      <div className="news">
+        <a href="https://opencollective.com/badgen">
+          Consider donating to help us sustain our service ❤️
+        </a>
+      </div>
+      <style jsx>{`
+        .topbar {
+          height: 50px;
+          line-height: 50px;
+          padding: 0 0.5em;
+          display: grid;
+          grid-template-columns: 1fr 460px;
+        }
+        .navs {
+          letter-spacing: 0.04em;
+        }
+        .news {
+          text-align: right;
+        }
+        a {
+          display: inline-block;
+          font-size: 14px;
+          margin: 0 1em;
+          color: #777;
+        }
+      `}</style>
+    </div>
+  )
+}
+
+export default TopBar
diff --git a/pages/index.js b/pages/index.js
index b9de2d7..1c3f68e 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react'
 import BadgeExamples from '../components/badge-examples.js'
 import BadgenTitle from '../components/badgen-title.jsx'
+import TopBar from '../components/top-bar.jsx'
 import Intro from '../components/home-intro.js'
 import Footer from '../components/footer.js'
 import examples from '../static/.meta/badges.json'
@@ -16,6 +17,7 @@ const Index = () => {
   })
 
   return <>
+    <TopBar />
     <BadgenTitle host={host} />
     <div className='docs' style={{ width: '980px', margin: '0 auto' }}>
       <Intro />