added Gengar template, optimized images for fast loading

src/components/App/App.js

@@ -1,11 +1,14 @@
 /* eslint-disable no-unused-vars */
 import React, { useEffect, useContext } from 'react';
 
-import Onyx from '../../templates/onyx';
 import LeftSidebar from '../LeftSidebar/LeftSidebar';
 import RightSidebar from '../RightSidebar/RightSidebar';
 import AppContext from '../../context/AppContext';
+
+// Resume Templates
+import Onyx from '../../templates/onyx';
 import Pikachu from '../../templates/pikachu/Pikachu';
+import Gengar from '../../templates/gengar/Gengar';
 
 const App = () => {
   const context = useContext(AppContext);
@@ -23,6 +26,8 @@ const App = () => {
         return <Onyx />;
       case 'Pikachu':
         return <Pikachu />;
+      case 'Gengar':
+        return <Gengar />;
       default:
         return null;
     }

src/components/RightSidebar/RightSidebar.js

@@ -2,19 +2,19 @@ import React, { useState, useContext } from 'react';
 
 import AppContext from '../../context/AppContext';
 import TabBar from '../../shared/TabBar';
-import LayoutTab from './tabs/Layout';
+import TemplatesTab from './tabs/Templates';
 import ColorsTab from './tabs/Colors';
 import FontsTab from './tabs/Fonts';
 import ActionsTab from './tabs/Actions';
 
-const tabs = ['Layout', 'Colors', 'Fonts', 'Actions'];
+const tabs = ['Templates', 'Colors', 'Fonts', 'Actions'];
 
 const RightSidebar = () => {
   const context = useContext(AppContext);
   const { state, dispatch } = context;
   const { data, theme } = state;
 
-  const [currentTab, setCurrentTab] = useState('Layout');
+  const [currentTab, setCurrentTab] = useState('Templates');
   const onChange = (key, value) => {
     dispatch({
       type: 'on_input',
@@ -29,8 +29,8 @@ const RightSidebar = () => {
 
   const renderTabs = () => {
     switch (currentTab) {
-      case 'Layout':
-        return <LayoutTab theme={theme} onChange={onChange} />;
+      case 'Templates':
+        return <TemplatesTab theme={theme} onChange={onChange} />;
       case 'Colors':
         return <ColorsTab theme={theme} onChange={onChange} />;
       case 'Fonts':

src/components/RightSidebar/tabs/Templates.js

@@ -1,8 +1,9 @@
 import React from 'react';
 import Onyx, { Image as OnyxPreview } from '../../../templates/onyx';
 import Pikachu, { Image as PikachuPreview } from '../../../templates/pikachu';
+import Gengar, { Image as GengarPreview } from '../../../templates/gengar';
 
-const layouts = [
+const templates = [
   {
     name: 'Onyx',
     component: Onyx,
@@ -13,12 +14,17 @@ const layouts = [
     component: Pikachu,
     preview: PikachuPreview,
   },
+  {
+    name: 'Gengar',
+    component: Gengar,
+    preview: GengarPreview,
+  },
 ];
 
-const LayoutTab = ({ theme, onChange }) => {
+const TemplatesTab = ({ theme, onChange }) => {
   return (
     <div className="grid grid-cols-2 gap-6">
-      {layouts.map(x => (
+      {templates.map(x => (
         <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 ${
@@ -36,4 +42,4 @@ const LayoutTab = ({ theme, onChange }) => {
   );
 };
 
-export default LayoutTab;
+export default TemplatesTab;