initial commit, completed 40% of first milestone

src/shared/TabBar.js

@@ -0,0 +1,28 @@
+import React from 'react';
+
+const TabBar = ({ tabs, currentTab, setCurrentTab }) => {
+  return (
+    <ul id="tabs" className="my-4 flex items-center overflow-x-scroll">
+      {tabs.map(tab =>
+        currentTab === tab ? (
+          <li key={tab} className="mx-1">
+            <div className="whitespace-no-wrap bg-gray-700 text-white rounded-md text-sm py-2 px-6 font-medium">
+              {tab}
+            </div>
+          </li>
+        ) : (
+          <li key={tab} className="mx-1">
+            <div
+              className="bg-white whitespace-no-wrap rounded-md cursor-pointer text-sm py-2 px-6 font-medium hover:bg-gray-200"
+              onClick={() => setCurrentTab(tab)}
+            >
+              {tab}
+            </div>
+          </li>
+        ),
+      )}
+    </ul>
+  );
+};
+
+export default TabBar;

src/shared/TextArea.js

@@ -0,0 +1,18 @@
+import React from 'react';
+
+const TextArea = ({ label, placeholder, value, onChange, rows = 5 }) => (
+  <div className="my-4 w-full flex flex-col">
+    <label className="uppercase tracking-wide text-gray-600 text-xs font-semibold mb-2">
+      {label}
+    </label>
+    <textarea
+      className="appearance-none block leading-7 w-full bg-gray-200 text-gray-800 border border-gray-200 rounded py-3 px-4 focus:outline-none focus:bg-white focus:border-gray-500"
+      rows={rows}
+      value={value}
+      onChange={e => onChange(e.target.value)}
+      placeholder={placeholder}
+    />
+  </div>
+);
+
+export default TextArea;

src/shared/TextField.js

@@ -0,0 +1,18 @@
+import React from 'react';
+
+const TextField = ({ label, placeholder, value, onChange }) => (
+  <div className="my-4 w-full flex flex-col">
+    <label className="uppercase tracking-wide text-gray-600 text-xs font-semibold mb-2">
+      {label}
+    </label>
+    <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"
+      value={value}
+      onChange={e => onChange(e.target.value)}
+      placeholder={placeholder}
+    />
+  </div>
+);
+
+export default TextField;