more organization, added references and languages

src/shared/Counter.js

@@ -0,0 +1,35 @@
+import React from 'react';
+
+const Counter = ({ label, value, onDecrement, onIncrement, className }) => {
+  return (
+    <div className={className}>
+      <label className="uppercase tracking-wide text-gray-600 text-xs font-semibold mb-2">
+        {label}
+      </label>
+      <div className="flex flex-row h-10 w-full rounded-lg relative bg-transparent mt-1">
+        <button
+          type="button"
+          onClick={onDecrement}
+          className="bg-gray-200 text-gray-600 hover:text-gray-700 hover:bg-gray-400 h-full w-20 rounded-l cursor-pointer px-2"
+        >
+          <span className="m-auto text-2xl">−</span>
+        </button>
+        <input
+          readOnly
+          type="number"
+          className="text-center w-full bg-gray-200 font-semibold text-md hover:text-black focus:text-black md:text-basecursor-default flex items-center text-gray-600"
+          value={value}
+        />
+        <button
+          type="button"
+          onClick={onIncrement}
+          className="bg-gray-200 text-gray-600 hover:text-gray-700 hover:bg-gray-400 h-full w-20 rounded-r cursor-pointer px-2"
+        >
+          <span className="m-auto text-2xl">+</span>
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default Counter;

src/shared/TextField.js

@@ -1,6 +1,14 @@
 import React from 'react';
 
-const TextField = ({ label, placeholder, value, onChange, className, disabled }) => (
+const TextField = ({
+  label,
+  placeholder,
+  value,
+  onChange,
+  className,
+  disabled = false,
+  type = 'text',
+}) => (
   <div className={`w-full flex flex-col ${className}`}>
     {label && (
       <label className="uppercase tracking-wide text-gray-600 text-xs font-semibold mb-2">
@@ -9,7 +17,7 @@ const TextField = ({ label, placeholder, value, onChange, className, disabled })
     )}
     <input
       className="appearance-none block w-full bg-gray-200 text-gray-800 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
-      type="text"
+      type={type}
       disabled={disabled}
       value={value}
       onChange={e => onChange(e.target.value)}