adding Pikachu template to the mix

This commit is contained in:
Amruth Pillai
2020-03-25 19:22:34 +05:30
parent 7bec7b5d49
commit d294517b6c
11 changed files with 226 additions and 16 deletions

View File

@ -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

View File

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