web: bare input layout

.eslintrc.yml

@@ -1,5 +1,6 @@
 ---
 extends: standard
+parser: babel-eslint
 rules:
   max-len:
   - error

components/badge-builder.js

@@ -0,0 +1,46 @@
+import React from 'react'
+import Preview from './badge-preview.js'
+import TheBar from './the-bar.js'
+
+export default class extends React.Component {
+  state = {
+    badgeURL: ''
+  }
+
+  setBadgeURL = badgeURL => this.setState({ badgeURL })
+
+  render () {
+    const { badgeURL } = this.state
+
+    return (
+      <div>
+        <Preview badgeURL={badgeURL} />
+        <TheBar badgeURL={badgeURL} onChange={this.setBadgeURL} />
+        <Helper />
+        <style jsx>{`
+          div {
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+          }
+        `}</style>
+      </div>
+    )
+  }
+}
+
+const Helper = () => {
+  return (
+    <div>
+      -
+      <style jsx>{`
+        div {
+          height: 50vh;
+          width: 100%;
+        }
+      `}</style>
+    </div>
+  )
+}

components/badge-preview.js

@@ -0,0 +1,15 @@
+export default ({ host = 'https://badgen.net/', badgeURL }) => {
+  const badgeSrc = host + (badgeURL || 'badge///blue')
+  console.log(badgeURL)
+  return (
+    <div>
+      <img src={badgeSrc} />
+      <style jsx>{`
+        div {
+          height: 60px;
+          text-align: center;
+        }
+      `}</style>
+    </div>
+  )
+}

components/the-bar.js

@@ -0,0 +1,44 @@
+import React from 'react'
+
+export default class extends React.Component {
+  onChange = (e) => {
+    this.props.onChange(e.target.value)
+  }
+
+  render () {
+    const hostname = 'https://badgen.net/'
+    const placeholder = 'badge/:subject/:status/:color'
+
+    return (
+      <label>
+        <span>{hostname}</span>
+        <input
+          autoFocus
+          placeholder={placeholder}
+          size={placeholder.length}
+          onChange={this.onChange}
+        />
+        <style jsx>{`
+          label {
+            height: 100px;
+            width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background-color: #F3F3F3;
+          }
+          div, span, input {
+            font: 16px/24px monospace;
+          }
+          input {
+            height: 24px;
+            padding: 0;
+            border: none;
+            outline: none;
+            background: transparent;
+          }
+        `}</style>
+      </label>
+    )
+  }
+}

package-lock.json

@@ -1497,6 +1497,32 @@
       "integrity": "sha512-poPX9mZH/5CSanm50Q+1toVci6pv5KSRv/5TWCwtzQS5XEwn40BcCrgIeMFWP9CKKIniKXNxoIOnOq4VVlGXhg==",
       "dev": true
     },
+    "babel-eslint": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-9.0.0.tgz",
+      "integrity": "sha512-itv1MwE3TMbY0QtNfeL7wzak1mV47Uy+n6HtSOO4Xd7rvmO+tsGQSgyOEEgo6Y2vHZKZphaoelNeSVj4vkLA1g==",
+      "dev": true,
+      "requires": {
+        "@babel/code-frame": "^7.0.0",
+        "@babel/parser": "^7.0.0",
+        "@babel/traverse": "^7.0.0",
+        "@babel/types": "^7.0.0",
+        "eslint-scope": "3.7.1",
+        "eslint-visitor-keys": "^1.0.0"
+      },
+      "dependencies": {
+        "eslint-scope": {
+          "version": "3.7.1",
+          "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-3.7.1.tgz",
+          "integrity": "sha1-PWPD7f2gLgbgGkUq2IyqzHzctug=",
+          "dev": true,
+          "requires": {
+            "esrecurse": "^4.1.0",
+            "estraverse": "^4.1.1"
+          }
+        }
+      }
+    },
     "babel-loader": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.0.0.tgz",

package.json

@@ -17,6 +17,9 @@
     "postdeploy": "now -T amio alias",
     "canary": "now -T amio -e GH_TOKEN='@badgen-gh-token' && now -T amio alias badgen-canary"
   },
+  "standard": {
+    "parser": "babel-eslint"
+  },
   "dependencies": {
     "axios": "^0.18.0",
     "badgen": "^2.4.5",
@@ -35,6 +38,7 @@
     "xml2js": "^0.4.19"
   },
   "devDependencies": {
+    "babel-eslint": "^9.0.0",
     "micro-dev": "^3.0.0",
     "next": "^7.0.0-canary.11",
     "react": "^16.4.2",

pages/_app.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import App, { Container } from 'next/app'
+
+export default class MyApp extends App {
+  render () {
+    const { Component, pageProps } = this.props
+    return (
+      <Container>
+        <Component {...pageProps} />
+        <style jsx global>{`
+          html, body { margin: 0; height: 100% }
+          #__next { height: 100% }
+        `}</style>
+      </Container>
+    )
+  }
+}

pages/maker.js

@@ -1,7 +1,17 @@
 import React from 'react'
+import BadgeBuilder from '../components/badge-builder.js'
 
 export default class Index extends React.Component {
   render () {
-    return 'maker'
+    return (
+      <div>
+        <BadgeBuilder />
+        <style jsx>{`
+          div {
+            height: 100%;
+          }
+        `}</style>
+      </div>
+    )
   }
 }