adding Pikachu template to the mix

src/components/App/App.js

@@ -5,23 +5,36 @@ import Onyx from '../../templates/onyx';
 import LeftSidebar from '../LeftSidebar/LeftSidebar';
 import RightSidebar from '../RightSidebar/RightSidebar';
 import AppContext from '../../context/AppContext';
+import Pikachu from '../../templates/pikachu/Pikachu';
 
 const App = () => {
   const context = useContext(AppContext);
-  const { dispatch } = context;
+  const { state, dispatch } = context;
+  const { theme } = state;
 
   useEffect(() => {
-    const state = JSON.parse(localStorage.getItem('state'));
-    dispatch({ type: 'import_data', payload: state });
+    const storedState = JSON.parse(localStorage.getItem('state'));
+    dispatch({ type: 'import_data', payload: storedState });
   }, [dispatch]);
 
+  const renderTemplate = () => {
+    switch (theme.layout) {
+      case 'Onyx':
+        return <Onyx />;
+      case 'Pikachu':
+        return <Pikachu />;
+      default:
+        return null;
+    }
+  };
+
   return (
     <div className="h-screen overflow-hidden grid grid-cols-5 items-center">
       <LeftSidebar />
 
       <div className="z-0 h-screen col-span-3 flex justify-center items-center overflow-scroll">
         <div id="page" className="p-10 my-auto shadow-2xl overflow-scroll">
-          <Onyx />
+          {renderTemplate()}
         </div>
       </div>
 

src/components/LeftSidebar/tabs/Skills.js

@@ -53,7 +53,6 @@ const AddItem = ({ dispatch }) => {
     });
 
     setItem('');
-    setOpen(false);
   };
 
   return (

src/components/RightSidebar/RightSidebar.js

@@ -30,7 +30,7 @@ const RightSidebar = () => {
   const renderTabs = () => {
     switch (currentTab) {
       case 'Layout':
-        return <LayoutTab theme={theme} />;
+        return <LayoutTab theme={theme} onChange={onChange} />;
       case 'Colors':
         return <ColorsTab theme={theme} onChange={onChange} />;
       case 'Fonts':

src/components/RightSidebar/tabs/Colors.js

@@ -56,7 +56,7 @@ const ColorsTab = ({ theme, onChange }) => {
 
       <hr className="my-6" />
 
-      <div className="my-6 grid grid-cols-6 items-end">
+      {/* <div className="my-6 grid grid-cols-6 items-end">
         <div
           className="rounded-full w-8 h-8 mb-2 border-2"
           style={{ backgroundColor: theme.colors.background }}
@@ -70,7 +70,7 @@ const ColorsTab = ({ theme, onChange }) => {
             onChange={v => onChange('theme.colors.background', v)}
           />
         </div>
-      </div>
+      </div> */}
 
       <div className="my-6 grid grid-cols-6 items-end">
         <div

src/components/RightSidebar/tabs/Layout.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import Onyx, { Image as OnyxPreview } from '../../../templates/onyx';
+import Pikachu, { Image as PikachuPreview } from '../../../templates/pikachu';
 
 const layouts = [
   {
@@ -7,17 +8,24 @@ const layouts = [
     component: Onyx,
     preview: OnyxPreview,
   },
+  {
+    name: 'Pikachu',
+    component: Pikachu,
+    preview: PikachuPreview,
+  },
 ];
 
-const LayoutTab = ({ theme }) => {
+const LayoutTab = ({ theme, onChange }) => {
   return (
     <div className="grid grid-cols-2 gap-6">
       {layouts.map(x => (
-        <div key={x.name} className="text-center">
+        <div key={x.name} className="text-center" onClick={() => onChange('theme.layout', x.name)}>
           <img
             className={`rounded cursor-pointer object-cover border shadow hover:shadow-md ${
-              theme.layout === x.name ? 'border-gray-500' : 'border-transparent '
-            } hover:border-gray-400 cursor-pointer`}
+              theme.layout === x.name
+                ? 'border-gray-600 hover:border-gray-600'
+                : 'border-transparent '
+            } hover:border-gray-500 cursor-pointer`}
             src={x.preview}
             alt={x.name}
           />

src/context/AppContext.js

@@ -67,9 +67,9 @@ const initialState = {
       family: '',
     },
     colors: {
-      background: '',
-      primary: '',
-      accent: '',
+      background: '#ffffff',
+      primary: '#212121',
+      accent: '#f44336',
     },
   },
 };
@@ -100,6 +100,7 @@ const reducer = (state, { type, payload }) => {
       localStorage.setItem('state', JSON.stringify(state));
       return state;
     case 'import_data':
+      if (payload === null) return initialState;
       return {
         ...state,
         data: payload.data,

src/index.css

@@ -57,7 +57,6 @@ body {
   body,
   body * {
     -webkit-print-color-adjust: exact;
-    background-color: white;
     visibility: hidden;
   }
 
@@ -67,6 +66,7 @@ body {
   }
 
   #page {
+    background-color: white;
     width: 21cm;
     height: 29.7cm;
     margin: 0;

src/templates/pikachu/Pikachu.js

@@ -0,0 +1,184 @@
+import React, { useContext } from 'react';
+import AppContext from '../../context/AppContext';
+
+const Pikachu = () => {
+  const context = useContext(AppContext);
+  const { state } = context;
+  const { data, theme } = state;
+
+  const Photo = () => <img className="rounded-full object-cover" src={data.profile.photo} alt="" />;
+
+  const Header = () => (
+    <div
+      className="rounded flex flex-col justify-center"
+      style={{ backgroundColor: theme.colors.accent, color: theme.colors.background }}
+    >
+      <div className="flex flex-col justify-center mx-8 my-6">
+        <h1 className="text-3xl font-bold leading-tight">
+          {data.profile.firstName} {data.profile.lastName}
+        </h1>
+        <div className="text-sm font-medium tracking-wide">{data.profile.subtitle}</div>
+
+        <hr className="my-4 opacity-50" />
+
+        <div className="text-sm">{data.objective.body}</div>
+      </div>
+    </div>
+  );
+
+  const ContactItem = ({ icon, value }) =>
+    value && (
+      <div className="flex items-center my-3">
+        <span className="material-icons text-lg mr-2" style={{ color: theme.colors.accent }}>
+          {icon}
+        </span>
+        <span className="font-medium">{value}</span>
+      </div>
+    );
+
+  const SectionHeading = ({ title }) => (
+    <div
+      className="mb-2 border-b-2 pb-1 font-bold uppercase tracking-wide text-sm"
+      style={{ color: theme.colors.accent, borderColor: theme.colors.accent }}
+    >
+      {title}
+    </div>
+  );
+
+  const SkillItem = x => (
+    <span
+      key={x}
+      className="leading-none rounded-lg text-sm font-medium bg-gray-300 py-3 my-1 px-4"
+    >
+      {x}
+    </span>
+  );
+
+  const ExtraItem = x => (
+    <div key={x.key} className="text-sm my-1">
+      <h6 className="text-xs font-bold">{x.key}</h6>
+      <h6 className="">{x.value}</h6>
+    </div>
+  );
+
+  const WorkItem = x => (
+    <div key={x.title} className="mb-3">
+      <div className="flex justify-between items-center">
+        <div>
+          <h6 className="font-semibold">{x.title}</h6>
+          <p className="text-xs">{x.role}</p>
+        </div>
+        <span className="text-xs font-medium">
+          ({x.start} - {x.end})
+        </span>
+      </div>
+      <p className="mt-2 text-sm">{x.description}</p>
+    </div>
+  );
+
+  const EducationItem = x => (
+    <div key={x.name} className="mb-3">
+      <div className="flex justify-between items-center">
+        <div>
+          <h6 className="font-semibold">{x.name}</h6>
+          <p className="text-xs">{x.major}</p>
+        </div>
+        <div className="flex flex-col items-end">
+          <span className="text-sm font-bold" style={{ color: theme.colors.accent }}>
+            {x.grade}
+          </span>
+          <span className="text-xs font-medium">
+            ({x.start} - {x.end})
+          </span>
+        </div>
+      </div>
+      <p className="mt-2 text-sm">{x.description}</p>
+    </div>
+  );
+
+  const AwardCertificationItem = x => (
+    <div key={x.title} className="mb-3">
+      <h6 className="font-semibold">{x.title}</h6>
+      <p className="text-xs">{x.subtitle}</p>
+    </div>
+  );
+
+  return (
+    <div
+      style={{
+        fontFamily: theme.font.family,
+        backgroundColor: theme.colors.background,
+        color: theme.colors.primary,
+      }}
+    >
+      <div className="grid grid-cols-8 col-gap-6 row-gap-8">
+        <div className="self-center col-span-2">
+          <Photo />
+        </div>
+
+        <div className="col-span-6">
+          <Header />
+        </div>
+
+        <div className="col-span-2">
+          <div className="text-sm mb-6">
+            <ContactItem icon="phone" value={data.profile.phone} />
+            <ContactItem icon="language" value={data.profile.website} />
+            <ContactItem icon="alternate_email" value={data.profile.email} />
+            <ContactItem icon="location_on" value={data.profile.address.line3} />
+          </div>
+
+          {data.skills.enable && (
+            <div>
+              <SectionHeading title={data.skills.heading} />
+              <div className="flex flex-col mb-6">{data.skills.items.map(SkillItem)}</div>
+            </div>
+          )}
+
+          {data.extras.enable && (
+            <div>
+              <SectionHeading title={data.extras.heading} />
+              <div className="flex flex-col">{data.extras.items.map(ExtraItem)}</div>
+            </div>
+          )}
+        </div>
+
+        <div className="col-span-6">
+          {data.work.enable && (
+            <div>
+              <SectionHeading title={data.work.heading} />
+              <div className="flex flex-col mb-4">{data.work.items.map(WorkItem)}</div>
+            </div>
+          )}
+
+          {data.education.enable && (
+            <div>
+              <SectionHeading title={data.education.heading} />
+              <div className="flex flex-col mb-4">{data.education.items.map(EducationItem)}</div>
+            </div>
+          )}
+
+          {data.awards.enable && (
+            <div>
+              <SectionHeading title={data.awards.heading} />
+              <div className="flex flex-col mb-4">
+                {data.awards.items.map(AwardCertificationItem)}
+              </div>
+            </div>
+          )}
+
+          {data.certifications.enable && (
+            <div>
+              <SectionHeading title={data.certifications.heading} />
+              <div className="flex flex-col mb-4">
+                {data.certifications.items.map(AwardCertificationItem)}
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Pikachu;

src/templates/pikachu/index.js

@@ -0,0 +1,5 @@
+import Pikachu from './Pikachu';
+import image from './preview.png';
+
+export const Image = image;
+export default Pikachu;