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;