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}
           />