web: add footer & style switch to builder

components/builder-hints.js

@@ -37,7 +37,7 @@ export default ({ focus, badgeURL }) => {
           color: #333;
         }
         a:hover {
-          border-bottom: 1px dotted #333;
+          border-bottom: 1px dashed #333;
         }
       `}</style>
     </div>

components/builder-preview.js

@@ -1,11 +1,16 @@
+import Link from 'next/link'
 import debounceRender from 'react-debounce-render'
 
-const BadgePreview = ({ host = 'https://badgen.net/', badgeURL, focus }) => {
+const BadgePreview = ({ host, badgeURL, focus }) => {
   const showPreview = focus || !!badgeURL
   return (
     <div className='header-preview'>
       <div className={'title ' + (showPreview ? 'hidden' : 'show')}>
-        <h1><img src='/static/badgen-logo.svg' /> Badgen</h1>
+        <h1>
+          <img src='/static/badgen-logo.svg' />
+          Badgen
+          <StyleSwitch host={host} />
+        </h1>
         <p>Fast badge generating service.</p>
       </div>
       <div className={'preview ' + (showPreview ? 'show' : 'none')}>
@@ -42,6 +47,7 @@ const BadgePreview = ({ host = 'https://badgen.net/', badgeURL, focus }) => {
           width: 42px;
           vertical-align: top;
           margin-top: 2px;
+          margin-right: 10px;
         }
         .title h1 {
           margin: 1.5rem 0 0 0;
@@ -49,6 +55,8 @@ const BadgePreview = ({ host = 'https://badgen.net/', badgeURL, focus }) => {
           font-weight: 700;
           color: #333;
           height: 52px;
+          width: 235px;
+          position: relative;
         }
         .title p {
           font: 19px/32px Merriweather, serif;
@@ -72,6 +80,50 @@ const BadgePreview = ({ host = 'https://badgen.net/', badgeURL, focus }) => {
   )
 }
 
+const StyleSwitch = ({ host }) => {
+  if (!host) return null
+
+  return (
+    <span className='style-switch'>
+      { host.includes('https://flat.') ? [
+        <Link key='2' href='https://flat.badgen.net'><a>FLAT</a></Link>,
+        <Link key='1' href='https://badgen.net'><a>CLASSIC</a></Link>
+      ] : [
+        <Link key='1' href='https://badgen.net'><a>CLASSIC</a></Link>,
+        <Link key='2' href='https://flat.badgen.net'><a>FLAT</a></Link>
+      ] }
+      <style jsx>{`
+        .style-switch {
+          position: absolute;
+          box-sizing: border-box;
+          top: -2px;
+          left: 235px;
+          height: 26px;
+          font: 16px/26px sans-serif;
+          overflow: hidden;
+        }
+        a {
+          color: #999;
+          display: block;
+          line-height: 26px;
+          padding: 1px 3px;
+        }
+        a:first-child {
+          margin-top: 0;
+          transition: all 200ms cubic-bezier(0.215, 0.61, 0.355, 1);
+        }
+        .style-switch:hover a:first-child {
+          margin-top: -26px;
+        }
+        a:focus {
+          outline: none;
+          color: #08C;
+        }
+      `}</style>
+    </span>
+  )
+}
+
 const PreviewBadge = debounceRender(({ host, url }) => {
   return <img style={{ height: '30px' }} src={genBadgeSrc(host, url)} />
 }, 400)

pages/builder.js

@@ -3,6 +3,7 @@ import Preview from '../components/builder-preview.js'
 import Bar from '../components/builder-bar.js'
 import Hints from '../components/builder-hints.js'
 import Helper from '../components/builder-helper.js'
+import Footer from '../components/footer.js'
 
 export default class BuilderPage extends React.Component {
   state = {
@@ -34,18 +35,21 @@ export default class BuilderPage extends React.Component {
 
     return (
       <div className='home'>
-        <Preview host={host} badgeURL={badgeURL} focus={focus} />
-        <Bar
-          host={host}
-          badgeURL={badgeURL}
-          placeholder={placeholder}
-          onChange={this.setBadgeURL}
-          onBlur={this.setBlur}
-          onFocus={this.setFocus} />
-        <Hints focus={focus} badgeURL={badgeURL} />
-        { badgeURL && <Helper host={host} badgeURL={badgeURL} onSelect={this.selectExample} /> }
+        <div className='hero'>
+          <Preview host={host} badgeURL={badgeURL} focus={focus} />
+          <Bar
+            host={host}
+            badgeURL={badgeURL}
+            placeholder={placeholder}
+            onChange={this.setBadgeURL}
+            onBlur={this.setBlur}
+            onFocus={this.setFocus} />
+          <Hints focus={focus} badgeURL={badgeURL} />
+          { badgeURL && <Helper host={host} badgeURL={badgeURL} onSelect={this.selectExample} /> }
+        </div>
+        <Footer />
         <style jsx>{`
-          .home {
+          .hero {
             min-height: 100vh;
             position: relative;
           }

pages/index.js

@@ -1,3 +1,5 @@
 import Builder from './builder.js'
 
-export default Builder
+export default () => {
+  return <Builder />
+}