Show byte and bit counts next to title

diff --git a/src/App.js b/src/App.js
index 7009c03270010512c32240451d9362a3acfdda49..c86273d7f484ec755a770f72f542b9524999212a 100644 (file)
--- a/src/App.js
+++ b/src/App.js
@@ -12,6 +12,7 @@ import React from 'react';
 import type Value from './Field.react';
 import Field from './Field.react';
 import Label from './Label.react';
+import convert from './convert';
 
 import './App.css';
 
@@ -28,44 +29,58 @@ export default class App extends React.Component {
   }
 
   render() {
+    const {value} = this.state;
+    const bits = value ? convert(
+      value.value,
+      value.base,
+      16
+    ).length * 8 : 0;
+
     return (
       <div className="hextrapolate">
-        <h1>Hextrapolate</h1>
+        <h1>
+          Hextrapolate
+          &mdash;
+          {' '}
+          {bits / 8 } byte{bits / 8 === 1 ? '' : 's'},
+          {' '}
+          {bits} bits
+        </h1>
         <Label text="Hexadecimal">
           <Field
             base={16}
             onValueChange={this._onValueChange}
-            value={this.state.value}
+            value={value}
           />
         </Label>
         <Label text="Decimal">
           <Field
             onValueChange={this._onValueChange}
-            value={this.state.value}
+            value={value}
           />
         </Label>
         <Label text="Octal">
           <Field
             base={8}
             onValueChange={this._onValueChange}
-            value={this.state.value}
+            value={value}
           />
         </Label>
         <Label text="Binary">
           <Field
             base={2}
             onValueChange={this._onValueChange}
-            value={this.state.value}
+            value={value}
           />
         </Label>
         <DynamicField
           initialBase={32}
-          value={this.state.value}
+          value={value}
           onValueChange={this._onValueChange}
         />
         <DynamicField
           initialBase={36}
-          value={this.state.value}
+          value={value}
           onValueChange={this._onValueChange}
         />
       </div>