add enable/disable checkbox, and heading modifier

src/assets/starter/data.json

@@ -15,10 +15,12 @@
     "email": "hello@amruthpillai.com"
   },
   "objective": {
+    "enable": true,
     "heading": "Objective",
     "body": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis deserunt fuga qui perspiciatis magni obcaecati libero ullam lorem, ipsum dolor sit amet consectetur adipisicing elit, voluptate dolores. Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda maiores reiciendis, iusto cupiditate, laborum optio nesciunt corrupti, libero numquam a impedit totam magnam ipsum ducimus quas labore ea? Labore, eum."
   },
   "work": {
+    "enable": true,
     "heading": "Work Experience",
     "items": [
       {
@@ -40,6 +42,7 @@
     ]
   },
   "education": {
+    "enable": true,
     "heading": "Education",
     "items": [
       {
@@ -63,6 +66,7 @@
     ]
   },
   "awards": {
+    "enable": true,
     "heading": "Honors & Awards",
     "items": [
       {
@@ -78,6 +82,7 @@
     ]
   },
   "certifications": {
+    "enable": true,
     "heading": "Certifications",
     "items": [
       {
@@ -93,6 +98,7 @@
     ]
   },
   "skills": {
+    "enable": true,
     "heading": "Skills & Hobbies",
     "items": [
       "Photography",
@@ -106,6 +112,7 @@
     ]
   },
   "extras": {
+    "enable": true,
     "heading": "Personal Information",
     "items": [
       {

src/assets/tailwind/tailwind.css

@@ -608,14 +608,6 @@ video {
   }
 }
 
-.heading {
-  font-size: 0.75rem;
-  color: #718096;
-  font-weight: 700;
-  text-transform: uppercase;
-  margin-bottom: 0.25rem;
-}
-
 .sr-only {
   position: absolute;
   width: 1px;

src/components/LeftSidebar/LeftSidebar.js

@@ -27,7 +27,7 @@ const LeftSidebar = () => {
   const { state, dispatch } = context;
   const { data } = state;
 
-  const [currentTab, setCurrentTab] = useState('Extras');
+  const [currentTab, setCurrentTab] = useState('Objective');
   const onChange = (key, value) => {
     dispatch({
       type: 'on_input',

src/components/LeftSidebar/tabs/Awards.js

@@ -4,6 +4,7 @@ import set from 'lodash/set';
 
 import TextField from '../../../shared/TextField';
 import AppContext from '../../../context/AppContext';
+import Checkbox from '../../../shared/Checkbox';
 
 const AwardsTab = ({ data, onChange }) => {
   const context = useContext(AppContext);
@@ -11,6 +12,24 @@ const AwardsTab = ({ data, onChange }) => {
 
   return (
     <>
+      <div className="grid grid-cols-6 items-center">
+        <div className="col-span-1">
+          <Checkbox
+            checked={data.awards.enable}
+            onChange={v => onChange('data.awards.enable', v)}
+          />
+        </div>
+        <div className="col-span-5">
+          <TextField
+            placeholder="Heading"
+            value={data.awards.heading}
+            onChange={v => onChange('data.awards.heading', v)}
+          />
+        </div>
+      </div>
+
+      <hr className="my-6" />
+
       {data.awards.items.map((x, index) => (
         <Item
           item={x}

src/components/LeftSidebar/tabs/Certifications.js

@@ -4,6 +4,7 @@ import set from 'lodash/set';
 
 import TextField from '../../../shared/TextField';
 import AppContext from '../../../context/AppContext';
+import Checkbox from '../../../shared/Checkbox';
 
 const CertificationsTab = ({ data, onChange }) => {
   const context = useContext(AppContext);
@@ -11,6 +12,24 @@ const CertificationsTab = ({ data, onChange }) => {
 
   return (
     <>
+      <div className="grid grid-cols-6 items-center">
+        <div className="col-span-1">
+          <Checkbox
+            checked={data.certifications.enable}
+            onChange={v => onChange('data.certifications.enable', v)}
+          />
+        </div>
+        <div className="col-span-5">
+          <TextField
+            placeholder="Heading"
+            value={data.certifications.heading}
+            onChange={v => onChange('data.certifications.heading', v)}
+          />
+        </div>
+      </div>
+
+      <hr className="my-6" />
+
       {data.certifications.items.map((x, index) => (
         <Item
           item={x}

src/components/LeftSidebar/tabs/Education.js

@@ -5,6 +5,7 @@ import set from 'lodash/set';
 import TextField from '../../../shared/TextField';
 import TextArea from '../../../shared/TextArea';
 import AppContext from '../../../context/AppContext';
+import Checkbox from '../../../shared/Checkbox';
 
 const EducationTab = ({ data, onChange }) => {
   const context = useContext(AppContext);
@@ -12,6 +13,24 @@ const EducationTab = ({ data, onChange }) => {
 
   return (
     <>
+      <div className="grid grid-cols-6 items-center">
+        <div className="col-span-1">
+          <Checkbox
+            checked={data.education.enable}
+            onChange={v => onChange('data.education.enable', v)}
+          />
+        </div>
+        <div className="col-span-5">
+          <TextField
+            placeholder="Heading"
+            value={data.education.heading}
+            onChange={v => onChange('data.education.heading', v)}
+          />
+        </div>
+      </div>
+
+      <hr className="my-6" />
+
       {data.education.items.map((x, index) => (
         <Item
           item={x}

src/components/LeftSidebar/tabs/Extras.js

@@ -4,6 +4,7 @@ import set from 'lodash/set';
 
 import TextField from '../../../shared/TextField';
 import AppContext from '../../../context/AppContext';
+import Checkbox from '../../../shared/Checkbox';
 
 const ExtrasTab = ({ data, onChange }) => {
   const context = useContext(AppContext);
@@ -11,6 +12,24 @@ const ExtrasTab = ({ data, onChange }) => {
 
   return (
     <>
+      <div className="grid grid-cols-6 items-center">
+        <div className="col-span-1">
+          <Checkbox
+            checked={data.extras.enable}
+            onChange={v => onChange('data.extras.enable', v)}
+          />
+        </div>
+        <div className="col-span-5">
+          <TextField
+            placeholder="Heading"
+            value={data.extras.heading}
+            onChange={v => onChange('data.extras.heading', v)}
+          />
+        </div>
+      </div>
+
+      <hr className="my-6" />
+
       {data.extras.items.map((x, index) => (
         <Item
           item={x}

src/components/LeftSidebar/tabs/Objective.js

@@ -1,9 +1,29 @@
 import React from 'react';
 import TextArea from '../../../shared/TextArea';
+import TextField from '../../../shared/TextField';
+import Checkbox from '../../../shared/Checkbox';
 
 const ObjectiveTab = ({ data, onChange }) => {
   return (
     <div>
+      <div className="grid grid-cols-6 items-center">
+        <div className="col-span-1">
+          <Checkbox
+            checked={data.objective.enable}
+            onChange={v => onChange('data.objective.enable', v)}
+          />
+        </div>
+        <div className="col-span-5">
+          <TextField
+            placeholder="Heading"
+            value={data.objective.heading}
+            onChange={v => onChange('data.objective.heading', v)}
+          />
+        </div>
+      </div>
+
+      <hr className="my-6" />
+
       <TextArea
         rows="15"
         label="Objective"

src/components/LeftSidebar/tabs/Profile.js

@@ -4,6 +4,7 @@ import TextField from '../../../shared/TextField';
 const ProfileTab = ({ data, onChange }) => (
   <div>
     <TextField
+      className="mb-4"
       label="Photo URL"
       placeholder="https://i.imgur.com/..."
       value={data.profile.photo}
@@ -12,6 +13,7 @@ const ProfileTab = ({ data, onChange }) => (
 
     <div className="grid grid-cols-2 col-gap-4">
       <TextField
+        className="mb-4"
         label="First Name"
         placeholder="Jane"
         value={data.profile.firstName}
@@ -19,6 +21,7 @@ const ProfileTab = ({ data, onChange }) => (
       />
 
       <TextField
+        className="mb-4"
         label="Last Name"
         placeholder="Doe"
         value={data.profile.lastName}
@@ -27,6 +30,7 @@ const ProfileTab = ({ data, onChange }) => (
     </div>
 
     <TextField
+      className="mb-4"
       label="Subtitle"
       placeholder="Full Stack Web Developer"
       value={data.profile.subtitle}
@@ -36,6 +40,7 @@ const ProfileTab = ({ data, onChange }) => (
     <hr className="my-6" />
 
     <TextField
+      className="mb-4"
       label="Address Line 1"
       placeholder="Palladium Complex"
       value={data.profile.address.line1}
@@ -43,6 +48,7 @@ const ProfileTab = ({ data, onChange }) => (
     />
 
     <TextField
+      className="mb-4"
       label="Address Line 2"
       placeholder="140 E 14th St"
       value={data.profile.address.line2}
@@ -50,6 +56,7 @@ const ProfileTab = ({ data, onChange }) => (
     />
 
     <TextField
+      className="mb-4"
       label="Address Line 3"
       placeholder="New York, NY 10003 USA"
       value={data.profile.address.line3}
@@ -59,6 +66,7 @@ const ProfileTab = ({ data, onChange }) => (
     <hr className="my-6" />
 
     <TextField
+      className="mb-4"
       label="Phone Number"
       placeholder="+1 541 754 3010"
       value={data.profile.phone}
@@ -66,6 +74,7 @@ const ProfileTab = ({ data, onChange }) => (
     />
 
     <TextField
+      className="mb-4"
       label="Website"
       placeholder="google.com"
       value={data.profile.website}
@@ -73,6 +82,7 @@ const ProfileTab = ({ data, onChange }) => (
     />
 
     <TextField
+      className="mb-4"
       label="Email Address"
       placeholder="john.doe@example.com"
       value={data.profile.email}

src/components/LeftSidebar/tabs/Skills.js

@@ -1,6 +1,8 @@
 import React, { useState, useContext } from 'react';
 
 import AppContext from '../../../context/AppContext';
+import Checkbox from '../../../shared/Checkbox';
+import TextField from '../../../shared/TextField';
 
 const SkillsTab = ({ data, onChange }) => {
   const context = useContext(AppContext);
@@ -8,6 +10,24 @@ const SkillsTab = ({ data, onChange }) => {
 
   return (
     <>
+      <div className="grid grid-cols-6 items-center">
+        <div className="col-span-1">
+          <Checkbox
+            checked={data.skills.enable}
+            onChange={v => onChange('data.skills.enable', v)}
+          />
+        </div>
+        <div className="col-span-5">
+          <TextField
+            placeholder="Heading"
+            value={data.skills.heading}
+            onChange={v => onChange('data.skills.heading', v)}
+          />
+        </div>
+      </div>
+
+      <hr className="my-6" />
+
       {data.skills.items.map((x, index) => (
         <Item item={x} key={x} index={index} onChange={onChange} dispatch={dispatch} />
       ))}

src/components/LeftSidebar/tabs/Work.js

@@ -5,6 +5,7 @@ import set from 'lodash/set';
 import TextField from '../../../shared/TextField';
 import TextArea from '../../../shared/TextArea';
 import AppContext from '../../../context/AppContext';
+import Checkbox from '../../../shared/Checkbox';
 
 const WorkTab = ({ data, onChange }) => {
   const context = useContext(AppContext);
@@ -12,6 +13,21 @@ const WorkTab = ({ data, onChange }) => {
 
   return (
     <>
+      <div className="grid grid-cols-6 items-center">
+        <div className="col-span-1">
+          <Checkbox checked={data.work.enable} onChange={v => onChange('data.work.enable', v)} />
+        </div>
+        <div className="col-span-5">
+          <TextField
+            placeholder="Heading"
+            value={data.work.heading}
+            onChange={v => onChange('data.work.heading', v)}
+          />
+        </div>
+      </div>
+
+      <hr className="my-6" />
+
       {data.work.items.map((x, index) => (
         <Item
           item={x}

src/context/AppContext.js

@@ -26,30 +26,37 @@ const initialState = {
       email: '',
     },
     objective: {
+      enable: false,
       heading: 'Objective',
       body: '',
     },
     work: {
+      enable: false,
       heading: 'Work Experience',
       items: [],
     },
     education: {
+      enable: false,
       heading: 'Education',
       items: [],
     },
     awards: {
+      enable: false,
       heading: 'Honors & Awards',
       items: [],
     },
     certifications: {
+      enable: false,
       heading: 'Certifications',
       items: [],
     },
     skills: {
+      enable: false,
       heading: 'Skills & Hobbies',
       items: [],
     },
     extras: {
+      enable: false,
       heading: 'Personal Information',
       items: [],
     },

src/index.css

@@ -8,6 +8,10 @@ body {
 }
 
 @media screen {
+  input:checked + i.material-icons {
+    display: block;
+  }
+
   #sidebar {
     top: 0;
     left: 0;

src/shared/Checkbox.js

@@ -0,0 +1,19 @@
+import React from 'react';
+
+const Checkbox = ({ checked, onChange }) => {
+  return (
+    <div className="bg-white border-2 rounded border-gray-400 hover:border-gray-500 w-8 h-8 flex flex-shrink-0 justify-center items-center mr-2 focus-within:border-blue-500 cursor-pointer">
+      <input
+        type="checkbox"
+        className="w-8 h-8 opacity-0 absolute cursor-pointer"
+        checked={checked}
+        onChange={e => onChange(e.target.checked)}
+      />
+      <i className="material-icons fill-current hidden text-lg font-bold text-gray-800 cursor-pointer">
+        check
+      </i>
+    </div>
+  );
+};
+
+export default Checkbox;

src/shared/TextArea.js

@@ -1,7 +1,7 @@
 import React from 'react';
 
-const TextArea = ({ label, placeholder, value, onChange, rows = 5 }) => (
+const TextArea = ({ label, placeholder, value, onChange, className, rows = 5 }) => (
-  <div className="my-4 w-full flex flex-col">
+  <div className={`w-full flex flex-col ${className}`}>
     <label className="uppercase tracking-wide text-gray-600 text-xs font-semibold mb-2">
       {label}
     </label>

src/shared/TextField.js

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

src/templates/onyx/Onyx.js

@@ -38,133 +38,178 @@ const Onyx = () => {
           </div>
         </div>
         <div className="col-span-1 text-xs">
-          <div className="flex items-center my-3">
+          {data.profile.phone && (
-            <span className="material-icons text-lg mr-2" style={{ color: theme.colors.accent }}>
+            <div className="flex items-center my-3">
-              phone
+              <span className="material-icons text-lg mr-2" style={{ color: theme.colors.accent }}>
-            </span>
+                phone
-            <span className="font-medium">{data.profile.phone}</span>
+              </span>
-          </div>
+              <span className="font-medium">{data.profile.phone}</span>
-          <div className="flex items-center my-3">
+            </div>
-            <span className="material-icons text-lg mr-2" style={{ color: theme.colors.accent }}>
+          )}
-              language
+          {data.profile.website && (
-            </span>
+            <div className="flex items-center my-3">
-            <span className="font-medium">{data.profile.website}</span>
+              <span className="material-icons text-lg mr-2" style={{ color: theme.colors.accent }}>
-          </div>
+                language
-          <div className="flex items-center my-3">
+              </span>
-            <span className="material-icons text-lg mr-2" style={{ color: theme.colors.accent }}>
+              <span className="font-medium">{data.profile.website}</span>
-              alternate_email
+            </div>
-            </span>
+          )}
-            <span className="font-medium">{data.profile.email}</span>
+          {data.profile.email && (
-          </div>
+            <div className="flex items-center my-3">
+              <span className="material-icons text-lg mr-2" style={{ color: theme.colors.accent }}>
+                alternate_email
+              </span>
+              <span className="font-medium">{data.profile.email}</span>
+            </div>
+          )}
         </div>
       </div>
 
       <hr className="my-6" />
 
-      <h6 className="text-xs font-bold uppercase mt-6 mb-2" style={{ color: theme.colors.accent }}>
+      {data.objective.enable && (
-        {data.objective.heading}
+        <div>
-      </h6>
+          <h6
-      <p className="text-sm">{data.objective.body}</p>
+            className="text-xs font-bold uppercase mt-6 mb-2"
-
+            style={{ color: theme.colors.accent }}
-      <h6 className="text-xs font-bold uppercase mt-6 mb-2" style={{ color: theme.colors.accent }}>
+          >
-        {data.work.heading}
+            {data.objective.heading}
-      </h6>
+          </h6>
-      {data.work.items.map(exp => (
+          <p className="text-sm">{data.objective.body}</p>
-        <div key={exp.title} className="mt-3">
-          <div className="flex justify-between">
-            <div>
-              <h6 className="font-semibold">{exp.title}</h6>
-              <p className="text-xs">{exp.role}</p>
-            </div>
-            <span className="text-xs font-medium">
-              ({exp.start} - {exp.end})
-            </span>
-          </div>
-          <p className="mt-2 text-sm">{exp.description}</p>
         </div>
-      ))}
+      )}
 
-      <h6 className="text-xs font-bold uppercase mt-6 mb-2" style={{ color: theme.colors.accent }}>
+      {data.work.enable && (
-        {data.education.heading}
+        <div>
-      </h6>
+          <h6
-      {data.education.items.map(edu => (
+            className="text-xs font-bold uppercase mt-6 mb-2"
-        <div key={edu.name} className="mt-3">
+            style={{ color: theme.colors.accent }}
-          <div className="flex justify-between">
+          >
-            <div>
+            {data.work.heading}
-              <h6 className="font-semibold">{edu.name}</h6>
+          </h6>
-              <p className="text-xs">{edu.major}</p>
+          {data.work.items.map(exp => (
+            <div key={exp.title} className="mt-3">
+              <div className="flex justify-between">
+                <div>
+                  <h6 className="font-semibold">{exp.title}</h6>
+                  <p className="text-xs">{exp.role}</p>
+                </div>
+                <span className="text-xs font-medium">
+                  ({exp.start} - {exp.end})
+                </span>
+              </div>
+              <p className="mt-2 text-sm">{exp.description}</p>
             </div>
-            <div className="flex flex-col items-end">
+          ))}
-              <span className="text-sm font-bold">{edu.grade}</span>
-              <span className="text-xs font-medium">
-                ({edu.start} - {edu.end})
-              </span>
-            </div>
-          </div>
-          <p className="mt-2 text-sm">{edu.description}</p>
         </div>
-      ))}
+      )}
+
+      {data.education.enable && (
+        <div>
+          <h6
+            className="text-xs font-bold uppercase mt-6 mb-2"
+            style={{ color: theme.colors.accent }}
+          >
+            {data.education.heading}
+          </h6>
+          {data.education.items.map(edu => (
+            <div key={edu.name} className="mt-3">
+              <div className="flex justify-between">
+                <div>
+                  <h6 className="font-semibold">{edu.name}</h6>
+                  <p className="text-xs">{edu.major}</p>
+                </div>
+                <div className="flex flex-col items-end">
+                  <span className="text-sm font-bold">{edu.grade}</span>
+                  <span className="text-xs font-medium">
+                    ({edu.start} - {edu.end})
+                  </span>
+                </div>
+              </div>
+              <p className="mt-2 text-sm">{edu.description}</p>
+            </div>
+          ))}
+        </div>
+      )}
 
       <div className="grid grid-cols-2">
+        {data.awards.enable && (
+          <div>
+            <h6
+              className="text-xs font-bold uppercase mt-6 mb-2"
+              style={{ color: theme.colors.accent }}
+            >
+              {data.awards.heading}
+            </h6>
+            {data.awards.items.map(x => (
+              <div key={x.title} className="mt-3">
+                <h6 className="font-semibold">{x.title}</h6>
+                <p className="text-xs">{x.subtitle}</p>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {data.certifications.enable && (
+          <div>
+            <h6
+              className="text-xs font-bold uppercase mt-6 mb-2"
+              style={{ color: theme.colors.accent }}
+            >
+              {data.certifications.heading}
+            </h6>
+            {data.certifications.items.map(x => (
+              <div key={x.title} className="mt-3">
+                <h6 className="font-semibold">{x.title}</h6>
+                <p className="text-xs">{x.subtitle}</p>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {data.skills.enable && (
         <div>
           <h6
             className="text-xs font-bold uppercase mt-6 mb-2"
             style={{ color: theme.colors.accent }}
           >
-            {data.awards.heading}
+            {data.skills.heading}
           </h6>
-          {data.awards.items.map(x => (
+          <div className="mt-1 flex flex-wrap">
-            <div key={x.title} className="mt-3">
+            {data.skills.items.map(x => (
-              <h6 className="font-semibold">{x.title}</h6>
+              <span
-              <p className="text-xs">{x.subtitle}</p>
+                key={x}
-            </div>
+                className="text-xs rounded-full px-3 py-1 font-medium my-2 mr-2"
-          ))}
+                style={{ backgroundColor: theme.colors.body, color: theme.colors.background }}
+              >
+                {x}
+              </span>
+            ))}
+          </div>
         </div>
+      )}
 
+      {data.extras.enable && (
         <div>
           <h6
             className="text-xs font-bold uppercase mt-6 mb-2"
             style={{ color: theme.colors.accent }}
           >
-            {data.certifications.heading}
+            {data.extras.heading}
           </h6>
-          {data.certifications.items.map(x => (
+          <table className="w-2/3 table-auto">
-            <div key={x.title} className="mt-3">
+            <tbody>
-              <h6 className="font-semibold">{x.title}</h6>
+              {data.extras.items.map(x => (
-              <p className="text-xs">{x.subtitle}</p>
+                <tr key={x.key}>
-            </div>
+                  <td className="border font-medium px-4 py-2 text-sm">{x.key}</td>
-          ))}
+                  <td className="border px-4 py-2 text-sm">{x.value}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
         </div>
-      </div>
+      )}
-
-      <h6 className="text-xs font-bold uppercase mt-6 mb-2" style={{ color: theme.colors.accent }}>
-        {data.skills.heading}
-      </h6>
-      <div className="mt-1 flex flex-wrap">
-        {data.skills.items.map(x => (
-          <span
-            key={x}
-            className="text-xs rounded-full px-3 py-1 font-medium my-2 mr-2"
-            style={{ backgroundColor: theme.colors.body, color: theme.colors.background }}
-          >
-            {x}
-          </span>
-        ))}
-      </div>
-
-      <h6 className="text-xs font-bold uppercase mt-6 mb-2" style={{ color: theme.colors.accent }}>
-        {data.extras.heading}
-      </h6>
-      <table className="w-2/3 table-auto">
-        <tbody>
-          {data.extras.items.map(x => (
-            <tr key={x.key}>
-              <td className="border font-medium px-4 py-2 text-sm">{x.key}</td>
-              <td className="border px-4 py-2 text-sm">{x.value}</td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
     </div>
   );
 };