added hobbies section, updated templates

src/components/LeftSidebar/LeftSidebar.js

@@ -12,6 +12,7 @@ import SkillsTab from './tabs/Skills';
 import ExtrasTab from './tabs/Extras';
 import LanguagesTab from './tabs/Languages';
 import ReferencesTab from './tabs/References';
+import HobbiesTab from './tabs/Hobbies';
 
 const LeftSidebar = () => {
   const context = useContext(AppContext);
@@ -26,11 +27,12 @@ const LeftSidebar = () => {
     { key: 'awards', name: data.awards.heading },
     { key: 'certifications', name: data.certifications.heading },
     { key: 'skills', name: data.skills.heading },
+    { key: 'hobbies', name: data.hobbies.heading },
     { key: 'languages', name: data.languages.heading },
     { key: 'references', name: data.references.heading },
     { key: 'extras', name: data.extras.heading },
   ];
-  const [currentTab, setCurrentTab] = useState(tabs[6].key);
+  const [currentTab, setCurrentTab] = useState(tabs[0].key);
   const onChange = (key, value) => {
     dispatch({
       type: 'on_input',
@@ -45,25 +47,27 @@ const LeftSidebar = () => {
 
   const renderTabs = () => {
     switch (currentTab) {
-      case tabs[0].key:
+      case 'profile':
         return <ProfileTab data={data} onChange={onChange} />;
-      case tabs[1].key:
+      case 'objective':
         return <ObjectiveTab data={data} onChange={onChange} />;
-      case tabs[2].key:
+      case 'work':
         return <WorkTab data={data} onChange={onChange} />;
-      case tabs[3].key:
+      case 'education':
         return <EducationTab data={data} onChange={onChange} />;
-      case tabs[4].key:
+      case 'awards':
         return <AwardsTab data={data} onChange={onChange} />;
-      case tabs[5].key:
+      case 'certifications':
         return <CertificationsTab data={data} onChange={onChange} />;
-      case tabs[6].key:
+      case 'skills':
         return <SkillsTab data={data} onChange={onChange} />;
-      case tabs[7].key:
+      case 'hobbies':
+        return <HobbiesTab data={data} onChange={onChange} />;
+      case 'languages':
         return <LanguagesTab data={data} onChange={onChange} />;
-      case tabs[8].key:
+      case 'references':
         return <ReferencesTab data={data} onChange={onChange} />;
-      case tabs[9].key:
+      case 'extras':
         return <ExtrasTab data={data} onChange={onChange} />;
       default:
         return null;

src/components/LeftSidebar/tabs/Hobbies.js

@@ -0,0 +1,133 @@
+import React, { useState, useContext } from 'react';
+
+import AppContext from '../../../context/AppContext';
+import Checkbox from '../../../shared/Checkbox';
+import TextField from '../../../shared/TextField';
+import { addItem, deleteItem, moveItemUp, moveItemDown } from '../../../utils';
+import ItemHeading from '../../../shared/ItemHeading';
+
+const HobbiesTab = ({ data, onChange }) => {
+  const context = useContext(AppContext);
+  const { dispatch } = context;
+
+  return (
+    <>
+      <div className="my-6 grid grid-cols-6 items-center">
+        <div className="col-span-1">
+          <Checkbox
+            checked={data.hobbies.enable}
+            onChange={v => onChange('data.hobbies.enable', v)}
+          />
+        </div>
+        <div className="col-span-5">
+          <TextField
+            placeholder="Heading"
+            value={data.hobbies.heading}
+            onChange={v => onChange('data.hobbies.heading', v)}
+          />
+        </div>
+      </div>
+
+      <hr className="my-6" />
+
+      {data.hobbies.items.map((x, index) => (
+        <Item item={x} key={index} index={index} onChange={onChange} dispatch={dispatch} />
+      ))}
+
+      <AddItem heading={data.hobbies.heading} dispatch={dispatch} />
+    </>
+  );
+};
+
+const Form = ({ item, onChange }) => {
+  return (
+    <input
+      className="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
+      placeholder="Beatboxing"
+      value={item}
+      onChange={e => onChange(e.target.value)}
+      type="text"
+    />
+  );
+};
+
+const AddItem = ({ heading, dispatch }) => {
+  const [isOpen, setOpen] = useState(false);
+  const [item, setItem] = useState('');
+
+  const add = () => {
+    if (item === '') return;
+
+    addItem(dispatch, 'hobbies', item);
+
+    setItem('');
+  };
+
+  return (
+    <div className="my-4 border border-gray-200 rounded p-5">
+      <ItemHeading heading={heading} setOpen={setOpen} isOpen={isOpen} />
+
+      <div className={`mt-6 ${isOpen ? 'block' : 'hidden'}`}>
+        <div className="grid grid-cols-4 gap-4">
+          <div className="col-span-3">
+            <Form item={item} onChange={setItem} />
+          </div>
+
+          <button
+            type="button"
+            onClick={add}
+            className="col-span-1 bg-gray-600 hover:bg-gray-700 text-sm font-medium rounded"
+          >
+            <div className="flex justify-center items-center">
+              <i className="material-icons font-bold text-white text-lg">add</i>
+            </div>
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const Item = ({ item, index, onChange, dispatch }) => {
+  const identifier = `data.hobbies.items[${index}]`;
+
+  return (
+    <div className="my-4 grid grid-cols-12">
+      <div className="col-span-9">
+        <Form item={item} onChange={v => onChange(identifier, v)} />
+      </div>
+
+      <button
+        type="button"
+        onClick={() => moveItemUp(dispatch, 'hobbies', item)}
+        className="col-span-1 text-gray-600 hover:text-red-600 text-sm font-medium"
+      >
+        <div className="flex justify-end items-center">
+          <i className="material-icons font-bold text-lg">arrow_upward</i>
+        </div>
+      </button>
+
+      <button
+        type="button"
+        onClick={() => moveItemDown(dispatch, 'hobbies', item)}
+        className="col-span-1 text-gray-600 hover:text-red-600 text-sm font-medium"
+      >
+        <div className="flex justify-end items-center">
+          <i className="material-icons font-bold text-lg">arrow_downward</i>
+        </div>
+      </button>
+
+      <button
+        type="button"
+        onClick={() => deleteItem(dispatch, 'hobbies', item)}
+        className="col-span-1 text-gray-600 hover:text-red-600 text-sm font-medium"
+      >
+        <div className="flex justify-end items-center">
+          <i className="material-icons font-bold text-lg">close</i>
+        </div>
+      </button>
+    </div>
+  );
+};
+
+export default HobbiesTab;